React Native Props - React Native

What is React Native Props?

In our previous section, we have focussed on how to use mutable state. In this section, we will learn about how to combine state and props.

By passing props, Presentational components will get all data. Only container components will take up state.

Container Component

Theory

As of now, lets update container component, which will handle state ofpresentational component by pass props.

Container component is only used for handling state. All functionality related to view (styling etc.) will be handled in presentational component.

Example

On using example from our earlier sections, it is required to remove Text element from render function as this element is used for presenting text to users. This is placed inside presentational component.

Look at the code below. We will import MyPresentationalComponent and pass it to render function.

We also need to pass props. We are passing props by adding myText = {this.state.myText} and deleteText = {this.deleteText} to <MyPresentationalComponent>. Now we will be able to access this inside presentational component.

src/components/myComponent/MyContainerComponent.js

Presentational Component

Theory

Presentational components must be used only for presenting view to users. These components would not have any state. They can receive all data and functions as props.

Example

As we discussed earlier in the previous chapter, we use EC6 function syntax for presentational components.

Our component will be receiving props, return view elements, present the text with the help of {props.myText} and invoke {props.deleteText} function when a user clicks on the text.

Now we have the same functionality as in our State chapter. The only difference is that we refactored our code to container and presentational component.

We can run the app and can view that the text is displayed.

Output

 React Native Props

Upon clicking on text, it will be removed from screen.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

React Native Topics