Pass Selected Value to Parent Component

[bluecrunch]

Hi folks,

I started using react-select recently and wanted to set state with the value of a selected option. I imported the "select"-component "find.js" to my main component "items.js" and so far it's fine, I can use the select. If I want to get the selected value in my child component it works fine. However, if I try it as I usually do with child components in a parent component, e.g. onChange={this.handleChange}, it isn't working. So I'd need to pass the value from child to parent another way, correct? If I am wrong, is there's another way to solve this?
Thanks in advance for your help.

[ebonow]

Greetings @bluecrunch ,

React advocates a one way data flow, so the basic methodology for something like this would be to create the Select as a controlled component in which the parent provides both the value and setValue method as props to the child.

// find.js
const Find = props => {
  const { selectedValue, setSelectedValue } = props;

  const onChange = option => {
    // do stuff with selected object and then send selected value to parent through provided prop
    setSelectedValue(option);
  }
  
  return <Select value={selectedValue} onChange={onChange} />
}

// items.js
const Items = props => {
  const [ selectedValue, setSelectedValue ] = useState();
  
  return (
    <Find selectedValue={selectedValue} setSelectedValue={setSelectedValue} />
  )
}

[bluecrunch]

Many thanks, @ebonow. For all who came to this post and may also face the issue that they want to see a "working" solution, here are my code snippets which are also solving issues like "event" not defined.

Parent:

    handleMyChange = (temperature) => {
        this.setState({inputValue: temperature});  
        console.log(temperature)
    }
    <FindItems value={this.state.inputValue} onTemperatureChange={this.handleMyChange}/>   

Child

    handleMyChange = inputValue => {
      // Here, we invoke the callback with the new value
      this.props.onTemperatureChange(inputValue.value);
    }
<AsyncSelect options={option} value={this.props.value} onChange={this.handleMyChange}/>

I have used the example from React (you easily recognize it because of the "temperature"-tags in my example), but faced issues regarding the event.

So instead of

  handleChange(e) {
    this.props.onTemperatureChange(e.target.value);
  }

I did

  handleMyChange = inputValue => {
    this.props.onTemperatureChange(inputValue.value);
  }

and it worked. But please be aware, I am just starting and keep learning. Maybe there's a better solution.

But again, thanks to Ebonow for pushing me into the right direction.