How To Update The State Of Child Component From Parent?

I am just getting started with React and not able to figure this out. Select component is

Solution 1:

Try have onChange on Search be delegated to a props so that your parent will be the one that sets the value when onChange is called on child.

onChange={this.props.onInputChange}

Solution 2:

Here you are using value={this.props.term}, which makes the input a controlled component. The value here will always be same as this.props.term, which is the state from parent component. <Search term={this.state.filename} />

I guess what you really want to do here is change parent's state inside child component.

Then you should pass a function from parent component to child component. The function will change the state of parent component. You should define Something in parent component like these:

onChildInputChange(term) {
    this.setState({term: term })
}

Then pass it to child component through props

<Select><Searchterm={this.state.filename}onChildInputChange={this.onChildInputChange} /></Select>

so that in child component you can do this:

 <form onSubmit={this.handleSubmit}>
    <input
      type="search"
      value={this.props.term}
      onChange={()=>{this.props.onChildInputChange()}}
    />
  </form>