Is this a decent pattern to update parent state from children?


(Adam B.) #1

I’ve setup a parent component that just handles data fetching, state, and renders one child (which has other children itself).

However i’m a bit confused as to how children can update this state??

The parent has an addContact method which calls setState in the parent. This method is passed down into the children as a prop. Then the child can call this.props.addContact and the parent updates it’s state and the UI propagates the changes.

Is there a better pattern to do this?


class PickRecipients extends ComponentPlus {
  constructor(props) {
    super(props);
    this.state = {recentContacts: []};
  }

  addContactToStore(contact) {
    var contacts = this.state.recentContacts;
    contacts.push(contact);
    this.setState({recentContacts: contacts});
  }

  render() {
    return <ChooseRecipients
      recentContacts={ this.state.recentContacts }
      addContact={ this.addContactToStore }
    />;
  }
}

(Sophie Alpert) #2

Yup, this is a standard way to communicate between components and one of the simplest. We use this pattern in the Thinking in React docs:


(Adam B.) #3

Thanks @spicyj ! I’m really loving how React handles passing data through props… it’s making testing UI’s feasible (maybe even enjoyable lol).


(Ron04) #4

This looked amazing, but for whatever reason, I cannot get anything other than screenProps down to the child component. So if I try this.props.addContact I get, it’s not a function, and I don’t see in the console either witihn props.

Any special way to pass it down a nested TabNavigator’s Screen?

App
StackNavigator
TabNavigator
Screen