CODEWITHSUNDEEP
javascripthtmlreactjs
kristoferchris
kristoferchris

Reputation: 105

Setting default value for datalist does not allow user to change selection

I have a datalist that I want to be pre-populated based on the prop I am passing down. It correctly sets the value, but does not allow the dropdown value to be changed and basically disables it. Any ideas on how to fix this?

<input list="facilitators" name="facilitator" id="facilitatorsInput" value={this.props.breakout.facilitatorId}></input>
<datalist id="facilitators">
  {
   this.state.facilitators.map((facilitator) => <option value={facilitator.id} >{facilitator.firstName} {facilitator.lastName}</option>)
  }
</datalist>

Upvotes: 0

Views: 690

Answers (1)

Max
Max

Reputation: 1567

It looks like you are setting the value, but you have no way to change the value. Your <input /> needs an onChange handler.

Here's a working example: https://codesandbox.io/s/xrv9q019zo

const options = ["banana", "tomato", "apple"];

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      input: "banana"
    };
  }
  render() {
    return (
      <div className="App">
        <input
          onChange={e => {
            this.setState({ input: e.target.value });
          }}
          value={this.state.input}
          list="stuff"
        />
        <datalist id="stuff">
          {options.map(opt => (
            <option value={opt} />
          ))}
        </datalist>
      </div>
    );
  }
}

If you are getting the default value from the parent component, you may want to pass the onChange handler from the parent and manage the state there.

Upvotes: 1

Related Questions