CODEWITHSUNDEEP
reactjsreact-native
goolius_boozler
goolius_boozler

Reputation: 253

How to pass state value as a prop and set it in child?

I have a child component where I am passing state from the parent, and then I want to update the parents state.

I call the child in my parent component like this:

<ReminderButton
   buttonDisabledState={this.state.oneDayButtonDisabled}
   addReminderFunction={this.props.defaultHomeworkReminder(item, 'oneDay', 1)}
/>

Then in the child it updates state on the button press like this:

onPress={() => {
  this.setState({ [props.buttonDisabledState]: true });
  setTimeout(() => this.setState({ [props.buttonDisabledState]: false }), 1500);
  if (props.isReminderActive === false && moment(new Date()).isBefore(props.item.date)) {
      props.addReminderFunction();
  }
}

I am receiving an error that the setState is undefined.

Upvotes: 1

Views: 270

Answers (3)

hackemate
hackemate

Reputation: 537

Ok react per default permits pass data or state from parents to child components if you need to make from child to parent there are some options you can use maybe Redux or Mobx to manage the state, but if you don´t install any third party library, you must use context API or use functions to handle this, this is a little example

We have a parent component that wraps a counter component and has a prop called "changeScore" that receive a function handleScore, (handle score change the state incrementing the state by one)

state = {counter: 0};

handleScore(i) {
  this.setState(state => ({
    counter: state.counter + i
  }))
};



render(){
  return (
    <div className="scoreboard">
      <Counter
        changeScore={this.handleScore}
      />
    </div>
  )
}

And here is the Counter component that use ChangeScore prop to shot it when the user make click on the button

const Counter = ({changeScore})=>{
return(
    <div className="counter">
        <button
            onClick={
                ()=>{changeScore(1)}
            }
            >+</button>
    </div>
);};

Upvotes: 0

Akshit Mehra
Akshit Mehra

Reputation: 767

Create a function in your parent component to update the state because your parent component handles the state.

handlePress = value => {
    this.setState({ buttonDisabledState: value });
}

Pass this function as a prop to the child component

<ReminderButton
   pressHandler={this.handlePress}
   addReminderFunction={this.props.defaultHomeworkReminder(item, 'oneDay', 1)}
/>

And in your child component, use it like this

onPress={() => {
  props.pressHandler(true);
  setTimeout(() => props.pressHandler(false), 1500);
  if (props.isReminderActive === false && moment(new Date()).isBefore(props.item.date)) {
      props.addReminderFunction();
  }
}

Do NOTE that the setState() calls are asynchronous and it might happen that you use the state's new value (thinking that you have called setState()) without it being actually updated which may cause not very easily identifiable problems.

Upvotes: 1

J.Benda
J.Benda

Reputation: 66

You can´t set the state of the parent directly in the child component, but you can give the child component a callback function as a property:

<ReminderButton
   buttonDisabledState={this.state.oneDayButtonDisabled}
   updateParentState={this.onSetStateFromChildComponent.bind(this)}
   addReminderFunction={this.props.defaultHomeworkReminder(item, 'oneDay', 1)}
/>

And then the function in the parent element:

public onSetStateFromChildComponent(newState){
   this.setState(() => newState); 
}

Greetings!

Upvotes: 1

Related Questions