How to use selected attribute of select tag in a loop in React

Question

It is easy when we have individual options like this:

<select name="phone_type" id="phone_type">
  <option value="mobile" selected>Mobile</option>
  <option value="home">Home</option>
  <option value="office">Office</option>
</select>

But in my case I'm doing this using a loop:

phoneTypes = ['Mobile', 'Home', 'Office'];
...
<select onChange={(e) => this.handleChangePhonetype(e, index)}>
  {this.phoneTypes.map((phoneType, index) => {
    return (
      <option key={index} value={phoneType} name="type">
        {phoneType}
      </option>);
   })}
</select>

I searched the internet but couldn't get a proper answer for React. I want 'Mobile' to be selected already when the page loads. I don't know how to do this in React. Please pitch in.

Here is the stackblitz.

pass a value prop, <select value="Mobile".... You should do this in the initial value of the state and assign the state to value — Ramesh Reddy
– Ramesh Reddy, Commented Oct 31, 2021 at 4:15
@RameshReddy, pardon sir, I've attached the whole stackblitz to the question at the bottom. — Tanzeel
– Tanzeel, Commented Oct 31, 2021 at 4:32

Ramesh Reddy · Accepted Answer · 2021-10-31 04:57:03Z

You should simply use the type of each phone object as the value to the select element.

Here's the updated stackblitz.

const PhoneTypes = ['Mobile', 'Home', 'Office'];

class Questionnaire extends Component {
  state = {
    phones: [{ type: 'Mobile', number: '' }],
  };

  addContact() {
    this.setState((prevState) => ({
      phones: [...prevState.phones, { type: 'Mobile', number: '' }],
    }));
  }

  handleChange({ target: { name, value } }, phoneIndex) {
    this.setState((prevState) => ({
      phones: prevState.phones.map((phone, index) =>
        phoneIndex === index ? { ...phone, [name]: value } : phone
      ),
    }));
  }

  handleRemove(phoneIndex) {
    this.setState((prevState) => ({
      phones: prevState.phones.filter((_, index) => phoneIndex !== index),
    }));
  }

  handleSubmit(e) {
    console.log(this.state, '$$$');
  }

  render() {
    return (
      <div>
        <h1>The Form</h1>
        <label>Contact</label>
        {this.state.phones.map((phone, index) => {
          return (
            <div key={index}>
              <input
                onChange={(e) => this.handleChange(e, index)}
                value={phone.number}
                name="number"
              />
              <select
                name="type"
                value={phone.type}
                onChange={(e) => this.handleChange(e, index)}
              >
                {PhoneTypes.map((phoneType, index) => {
                  return (
                    <option key={index} value={phoneType}>
                      {phoneType}
                    </option>
                  );
                })}
              </select>
              <button onClick={(e) => this.handleRemove(index)}>Remove </button>
            </div>
          );
        })}
        <hr />
        <button onClick={(e) => this.addContact(e)}>Add contact</button>
        <hr />
        <button onClick={(e) => this.handleSubmit(e)}>Submit</button>
      </div>
    );
  }
}

I also fixed some other issues like mutating the state, incorrect arg to remove function etc.

@Tanzeel You can actually use a single function to update both number and type. Checkout the updated answer and stackblitz.

Collectives™ on Stack Overflow

How to use selected attribute of select tag in a loop in React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related