ReactJs Select add default value

Question

I want to store select default value if user not touch it in ReactJs. How is that possible?

<select onChange={this.valSelected.bind(this)}>
 {currencies.map(function(name, index){
 return <option value={name}>{name}</option>;
 })}
</select>

and

valSelected(event){
 this.setState({
 valSelected: event.target.value
 });
}

Answer 1

You can just add a value property to the select element, set by your state.

<select value={this.state.valSelected} onChange={this.valSelected.bind(this)}>
 {currencies.map(function(name, index){
 return <option value={name}>{name}</option>;
 })}
</select>

This is described here in the react docs: Doc Link

Then set a default state for the component, either in the constructor or with getInitialState: What is the difference between using constructor vs getInitialState in React / React Native?

Answer 2

Use defaultValue to select the default value.

 const statusOptions = [
 { value: 1, label: 'Publish' },
 { value: 0, label: 'Unpublish' }
 ];
 const [statusValue, setStatusValue] = useState('');
 const handleStatusChange = e => {
 setStatusValue(e.value);
 }
return(
<>
<Select options={statusOptions} defaultValue={[{ value: published, label: published == 1 ? 'Publish' : 'Unpublish' }]} onChange={handleStatusChange} value={statusOptions.find(obj => obj.value === statusValue)} required />
</>
)