CODEWITHSUNDEEP
javascriptreactjsredux
me-me
me-me

Reputation: 5809

Controlled Select in React not setting defaultValue

I have a React component that renders 3 select elements. I want to set a default value for all 3 but when I try to do that it does not work.

I distinguish between each one using a passed in prop called type. Type is the name of each select element. My defaultV is logging out the right values that I need for all 3 select elements. But when they render the defaultValue does not get set. The defaultValue to start with is empty but when I go into an edit mode in my app the defaultV gets added for all 3 but for some reason the defaultValue is not setting it for each render. I'm wondering is it getting overridden by the previous render as it renders 3 times ? How could I prevent this.

Code 

  const defaultV = data.value[type];

  <select
    onChange={onHandleChange}
    id={`${pre}${type}`}
    name={`${pre}${type}`}
    defaultValue={{ label: type, value: defaultV }}
  >
    <option value="" hidden invalid="true">{type}</option>
    {
      dates[type]().map(date => <option key={date}>{date}</option>)
    }
  </select>

Upvotes: 0

Views: 1385

Answers (1)

Shubham Yerawar
Shubham Yerawar

Reputation: 678

You can directly pass the value which is your default value to the select tag.

Please refer to below code:

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'lime'};
  }

  render() {
    return (
      <form>
        <label>
          Pick your favorite flavor:
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
        <input type="submit" value="Submit" />
       </form>
    );
  }
}

In your case it would be something like,

const defaultV = data.value[type];

  <select
    onChange={onHandleChange}
    id={`${pre}${type}`}
    name={`${pre}${type}`}
    value={defaultV}
  >
    <option value="" hidden invalid="true">{type}</option>
    {
      dates[type]().map(date => <option key={date} value={date}>{date}</option>)
    }
  </select>

Upvotes: 1

Related Questions