CODEWITHSUNDEEP
reactjsreact-native
kundan kamal
kundan kamal

Reputation: 672

Passing props to child component with other object

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>

Upvotes: 2

Views: 51

Answers (2)

Tushar Pandey
Tushar Pandey

Reputation: 4857

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}.

Upvotes: 1

Prasad Phule
Prasad Phule

Reputation: 478

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

Upvotes: 0

Related Questions