Passing props to child component with other object

user_4273971 0
Viewed 44
function NavigationItem(props){                   
return( 
<TouchableOpacity 
onPress={(view)=>props.navigation.closeDrawer()}>     
<Text style={customStyle.headerStyle}>{props.titleValue}</Text>
<View style={customStyle.dividerStyle}  />
  </TouchableOpacity>
  ) 
}

In the above function, you can see that I am receiving data in single argument props and other an object which is passing below. But I don't know why it's working I am passing two values one is props and the other is object titlevalue in the given below syntax. I hope you understand my query I am new in react native.

<NavigationItem {...props} titleValue={"Profile"} ></NavigationItem>
react-native reactjs
2 Answers

USING COMPONENT :

First of all, you have to understand what is props in react native and how you pass them to other component.

<NavigationItem {...props} titleValue={"Profile"} ></NavigationItem>

So in you statement {...props} and title are props and what you doing is passing all of your existing props ( as {...props}) + title to some other component.

DEFINING COMPONENT :

so what ever props are passed to you component for creation will be received in inside statement as props

function NavigationItem(props)

POINT TO BE NOTED

Don't get confused between props name as parameter in function NavigationItem(props) you can use any name here it can be kamal. but after using kamal you have to access your passed props like kamal.title.

One thing more its not a good approach to pass whole props as {...props} to some other component. it will re-render it if anything changes inside {...props}.

user_23829640

It's related to Spread Attributes {...props} means you are not passing props as it is rather props properties.

so as giving

<NavigationItem {...props} titleValue={"Profile"} ></NavigationItem>

after spread (assuming props have only navigation property) for understanding adding this code but it actually done by spread attribute.

<NavigationItem navigation={navigation} titleValue={"Profile"} ></NavigationItem>

now NavigationItem component has props as navigation and titleValue

user_24196960
Related