CODEWITHSUNDEEP
javascriptreactjs
Mohammad
Mohammad

Reputation: 142

Reactjs change state value from child

This is my code:

<input value={this.state.date)} onChange={this.handleForm} type="text" />
<DatePickerFa date={this.state.date} />

I pass date to DatePickerFa

And this is my DatePickerFa:

changeYear(){
        this.props.date = "...";
}

<span onClick={this.changeYear}>CHANGE</span>

I want into changeYear, change the this.state.date

Important:

I dont want use function in parent like this code:

handler(value) {
    this.setState({
        date: value
    })
}

Upvotes: 0

Views: 41

Answers (3)

damjance
damjance

Reputation: 39

U need to use setState function. it will look like this:

changeYear(){
        setState({ this.props.date: "..." })
}

And also don't forget to bind component, add this line to your constructor whit state:

this.changeYear = this.changeYear.bind(this)

Upvotes: 0

Seth Lutske
Seth Lutske

Reputation: 10686

Pass a function to the child:

<DatePickerFa 
  date={this.state.date} 
  setDate={newDate => { this.setState({date: newDate}) }}
/>

Now in your child:

<span 
  // pass a new value to the callback function:
  onClick={e => this.props.setDate(e.target.value)} // or whatever
>
  CHANGE
</span>

Upvotes: 1

Nitesh
Nitesh

Reputation: 1550

You are breaking one major principle of React. Props are immutable that is.

this.props.date = "...";

This can't be done. Instead, you need to update the state using setState in order to change that date.

Upvotes: 1

Related Questions