CODEWITHSUNDEEP
javascriptreactjs
kolrie
kolrie

Reputation: 12732

React select with value null

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?

Upvotes: 32

Views: 87579

Answers (3)

soma iyappan
soma iyappan

Reputation: 542

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>

Upvotes: 0

iaretiga
iaretiga

Reputation: 5205

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.

Upvotes: 60

Theo
Theo

Reputation: 1193

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.

Upvotes: 0

Related Questions