React select with value null

Question

I have the following code as part of my React component:

<select
  className="input form-control"
  onChange={this.onUserChanged}
  value={task.user_id}>
  <option value=''></option>
  {this.renderUserOptions()}
</select>

When the task.user_id is null on the first rendering of the component, the select is properly displayed with the empty option with value ''.

However, if I change the value from something that has a value back to the default option, the server side updates correctly, the task object returns the null for task.user_id but the select doesn't change to the default value.

What should I do to handle this scenario?

This is hopefully going to be fixed in an upcoming version: github.com/facebook/react/issues/11417 — RyanNerd
– RyanNerd, Commented May 6, 2018 at 7:02

Emzor · Accepted Answer · 2016-03-23 21:31:04Z

62

When setting the value for your select component, you will have to convert null to ''; and when receiving the value from your component, you will have to convert '' to null. A simple example:

class Example extends React.Component {
    constructor(props) {
        super(props);
        this.state = { selected: null };
    }

    render() {
        return <div>
            <select
                className="input form-control"
                onChange={e => this.setState({ selected: e.target.value || null })}
                value={this.state.selected || ''}>
                <option value=''></option>
                <option value='1'>cook dinner</option>
                <option value='2'>do dishes</option>
                <option value='3'>walk dog</option>
            </select>
            <input type='button' onClick={() => this.setState({ selected: null })} value='Reset' />
        </div>
    }
}

This works assuming that your ids are always truthy: e.target.value || null will convert the selected empty string to null; and this.state.selected || '' will convert your null state to an empty string. If your ids can be falsey (for example the number 0), you will need a more robust conversion.

See Fiddle here.

edited Mar 23, 2016 at 21:31

Emzor

1,37817 silver badges31 bronze badges

answered Mar 23, 2016 at 20:45

iaretiga

5,2551 gold badge15 silver badges9 bronze badges

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

2 Comments

paddotk Over a year ago

Glad I found this answer, I've been busting my head over this for hours :D

Dudeman3000 Over a year ago

Thanks for this answer. Yes, it makes sense, but I wish I could default the property value in the component constructor. I understand (kinda) why props are read-only but sometimes I wish they weren't.

Theo · Accepted Answer · 2016-03-23 20:42:44Z

0

I think your problem might be caused by this line:

 value={task.user_id}

The select will always show that as a value regardless of what was selected.

If your onUserChanged function is right you should see the right value in being selected on the server or on the console, but the client will always see that task.user_id.

Otherwise everything else seems right in your code.

answered Mar 23, 2016 at 20:42

Theo

1,20310 silver badges14 bronze badges

Comments

soma iyappan · Accepted Answer · 2022-02-02 09:17:10Z

0

using npm i react-usestateref usestateref
<MenuItem> value using ternary operator condition ? exprIfTrue : exprIfFalse

const [boardvalue, setboardvalue, ref] = useStateRef("");  
const handleChange = (e) => {
    setboardvalue(e.target.value);
  }; 

<Select style={{ flex: 2 ,}} 
disabled={ref.current==="State Board"?false:true} onChange{handleChangeClass} >
    {dataRef.current.allClass.map((text, index) => (
        <MenuItem value={ref.current==="State Board" ? text:""}>{text}</MenuItem>
     ))}
  </Select>

answered Feb 2, 2022 at 9:17

soma iyappan

5401 gold badge8 silver badges19 bronze badges

Collectives™ on Stack Overflow

React select with value null

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related