React-select doesn't show value in Laravel-mix

Question

A projectgroup form school delivered a frontend in React for which we have to make a backend. We decided to do this with Laravel. Everything works well now besides one thing: the dropdown doesn't show the chosen value in our Laravel-mix application but it does in their React app. We didn't change anything in the dropdown code so can someone explain me why it is not working now? I'm not very experienced in React so any help is appreciated.

This is the code:

    /* handleChange passes the selected dropdown item to the state. */
  handleChange = (selectedOption) => {
    this.setState({ selectedOption });
        if (selectedOption) {
            console.log(`Selected: ${selectedOption.label}`);
        }
  };

    /* This render function, renders the grid, dropdown-menu, 'Add Item'-button
     * and 'Reset Layout'-button. This is also where the createElement() function
     * is called for each grid item.
     */
  render() {
    const { selectedOption } = this.state;
    const value = selectedOption && selectedOption.value;

    return (
        <div>
            <div className='widgetselecter'>
                <Select className='dropdown'
                    name="form-field-name"
                    value={value}
                    onChange={this.handleChange}
                    options={[
                        { value: 'one', label: 'One' },
                        { value: 'Clock', label: 'Clock' },
                        { value: 'Photo', label: 'Photo' },
                        { value: 'Weather', label: 'Weather' },
                    ]}
                    />
                <button className='addButton' onClick={this.onAddItem}>Add Item</button>
                <button className='reset' onClick={this.onLayoutReset}>Reset Layout</button>
                <span className='title'>/Dash</span>
            </div>
            <ResponsiveReactGridLayout
                onLayoutChange={this.onLayoutChange}
                onBreakPointChange={this.onBreakPointChange}
                {...this.props}>
                {_.map(this.state.items, el => this.createElement(el))}
            </ResponsiveReactGridLayout>
        </div>
        );
  }
}

Answer 1

I fixed it by changing:

value={value}

to:

value={selectedOption}

and removed:

const value = selectedOption && selectedOption.value;

so it matches the example code on https://github.com/JedWatson/react-select .

handleChange = (selectedOption) => {
    this.setState({ selectedOption });
    console.log(`Option selected:`, selectedOption);
  }
  render() {
    const { selectedOption } = this.state;

    return (
      <Select
        value={selectedOption}
        onChange={this.handleChange}
        options={options}
      />
    );