How to pass props to child compoent from parent in react-native?

Question

Is there any idea how to send props to child component from parent in react native.I heard in react about that.But dont know in react-native. All I want is when user presses AddToCart button which actually is wrapped within onpress event of touchable opacity, props should be sent to another page.Somone told me about using redux, but I think this can happen in react-native too.

Bottom Line: There's a button when it pressed the props should be sent to another page.

ItemDetais page

From where props should be send.

cart() {
  let product_id = this.props.navigation.state.params.id;
  AsyncStorage.getItem('cart_id')
    .then((_id) => {
      API.post_data(_id, product_id)
        .then((data) => {
          if (data) {
            // this.props.navigation.navigate('Cart', {id: data.cart.id})
            // was using this method.But when I directly open
            // cart page it gives me an error undefined is not
            //  an object..blah blah
          }
        })
    })
}

<TouchableOpacity onPress={()=> { this.cart() }} >
    <Text>AddToCart<Text>
</TouchableOpacity>

CartPage

where props should be recieve.

componentDidMount() {
  let cart_id = this.props.navigation.state.params.id;
  // above method is just total waste.
  API.getCartItem(cart_id)
    .then((response) => {
    if (response) {
      this.setState({
        data: response
      });
    } else {
      alert('no data')
    }
  })
}

`an error undefined is not an object..blah blah` What is the exact error you are getting? — Tholle, Jul 20 '18 at 12:01
@Tholle TypeError: undefined is not an object..(evaluating this.props.navigation.state.params.id) — Yash, Jul 20 '18 at 12:17
You can send data by "this.props.navigation.navigate('Cart', {id: data.cart.id})" and to receive just check if(this.props.navigation.state.params.id){ cart_id = this.props.navigation.state.params.id } — Md Isfar Uddin, Jul 20 '18 at 12:43
I got data successfully.but if I open cart page directly without clicking to addToCart button..It gives me an error undefined is not an object.(evaluating this.props.navigation.state.params.id) — Yash, Jul 20 '18 at 12:51
Create a local state which is being updated and passed to child component. So when you press a button you update the state in parent and afterwards that updated state is passed to child component. — Sangsom, Jul 20 '18 at 13:51
@Sangsom How do I update the state by calling a function.which ofcourse is cart... — Yash, Jul 20 '18 at 14:06
@Yash https://stackoverflow.com/questions/35537229/how-to-update-parents-state-in-react — Sangsom, Jul 23 '18 at 06:35

score 0 · Answer 1 · answered Jul 20 '18 at 12:50

0

According to React Navigation docs this should work:

componentDidMount() {
  const { navigation } = this.props;
  // The 'NO-ID'  is a fallback value if the parameter is not available
  const cart_id = navigation.getParam('id', 'NO-ID');
  ...
}

answered Jul 20 '18 at 12:50

Sarp

95
1
7

Thanks for reply. with that method only the error's gone..but the user also gets navigate including cart_id...All i want is just the params should be pass from parent to child or from one page to another without letting the user to navigate..Just params...could this be possible in react navigation – Yash Jul 20 '18 at 13:57
So you want the user to add an item to the cart without having to navigate to the cart page every time? The cleanest way to do this would be to use redux. But if you *really* don't want to use redux you can keep an array of items, say itemsInCart, in the state of every screen. You can then pass it along to the other screen every time you call navigate. So every navigate would look like this.props.navigation.navigate('ScreenName', {id: data.cart.id}). I think this is really inconvenient but I can't think of another way without using redux. – Sarp Jul 20 '18 at 16:54
yeah I also think that's too inconvenient. I know a little about redux..So How to manage this in redux?? – Yash Jul 21 '18 at 08:45

How to pass props to child compoent from parent in react-native?

1 Answers1