React select is not selecting option

Question

I have the code sandbox attached and it is a simplified version of my actual app. I tried clicking on the options but none of them is being selected in the React Select v1 options.

This is my container file. If I remove the val in return( <div> <SelectComponent/> which is the value of the select component and it will show whatever I chose but I need the value props. I need the value props so that I can submit the value to my server.

Also if I replace await this.setState({ val: event.value }) with await this.setState({ val: event.val }), the component will show the chosen option but the val will be undefined.

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      val: null
    };
  }

  handleChange = async event => {
    event !== null
      ? await this.setState({ val: event.value })
      : await this.setState({ val: null });
  };
  render() {
    let fruitArray = [
      { value: "apple", label: "Apple" },
      { value: "orange", label: "Orange" },
      { value: "watermelon", label: "Watermelon" }
    ];
    return (
      <div>
        <SelectComponent
          val={this.state.val}      
          select_id="fruit_select_id"
          select_options={fruitArray}
          select_placeholder="Choose a fruit"
          handle_change={this.handleChange}
        />
      </div>
    );
  }
}

This is my select component file. I tried this with a stateless version too but the outcome are the same, nothing is being selected.

class SelectComponent extends Component {
  render() {
    const {
      select_id,
      select_options,
      handle_change,
      select_placeholder,
      val
    } = this.props;
    return (
      <div>
        <Select
          value={val}
          id={select_id}
          name={select_id}
          options={select_options}
          onChange={handle_change}
          placeholder={select_placeholder}
          isClearable
        />
      </div>
    );
  }
}

Can anyone tell me what went wrong?

Tholle · Accepted Answer · 2019-02-18 22:36:17Z

3

The Select component wants the entire selected option object as the value prop. If you put the entire object in state instead of just the value property, it will work.

handleChange = option => {
  this.setState({ val: option });
};

answered Feb 18, 2019 at 22:36

Tholle

113k22 gold badges209 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

larz · Accepted Answer · 2019-02-18 22:37:52Z

0

1 - no reason for any of the async/await stuff. That will just muck with React.

handleChange = event => this.setState({ val: event.value });

2 - You're passing val to your SelectComponent but you need to pass value;

<SelectComponent
      value={this.state.val}      
      select_id="fruit_select_id"
      select_options={fruitArray}
      select_placeholder="Choose a fruit"
      handle_change={this.handleChange}
/>

answered Feb 18, 2019 at 22:37

larz

5,7662 gold badges13 silver badges23 bronze badges

1 Comment

calvert Over a year ago

It is true that I don't need them and I removed the async/await from my code. Your code works too for showing the chosen option but when I tried to reset the option it doesn't work (which is not asked in the post). @Tholle answer works for me on everything and I thank you for your effort.

Collectives™ on Stack Overflow

React select is not selecting option

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related