Adding dynamic <option> to select doesn't show unless I switch the field

user_10407936 0
Viewed 50

I want to be able to add Group Members dynamically and I simply used + button for that. The problem is - it adds the input value of the prompt, but I can't see it unless I switch fields and type something else. Here is the YouTube link for better understanding: https://youtu.be/sA0WB2Le3Fg 

<button id="add" type="button" onClick={(e)=>this.addMember(e)}>+</button>

The state : 

 members: [
        {member:"Berin"},
        {member:"Cristian"},
        {member:"Raddy"},
        {member:"Ventsislav"},
      ]

The function : 

  addMember = (e) => {
    let input = prompt("Enter the name");
    this.state.members.push({member:input});
    e.preventDefault();
  }

The mapping function :

let members = this.state.members.map((member,index)=>{
          return <option value={member.member} key={index}>{member.member}</option>
        })

The select field : 

<select id="groupMember" onChange={this.changeMember} name="member" required>
  <option defaultValue="" selected disabled>Select group member</option>
 {members}
</select>
reactjs html javascript
3 Answers

Try this:

  addMember = (e) => {
    let input = prompt("Enter the name");
    let newMemberList = this.state.members;
    newMemberList.push(input);
    this.setState({ members: newMemberList });
    e.preventDefault();
  }
user_17037440

Recommended approach in the later React versions looks like this:

addMember = (e) => {
    let input = prompt("Enter the name");
    this.setState(prevState => ({
        members: [...prevState.members, input]
    }))
    e.preventDefault();
}
user_90569760

Thank you ! Already found the solution :

addMember = (e) => {
    let input = prompt("Enter the name");
    let members = this.state.members;
    members.push({member:input})
    e.preventDefault();
    this.setState({
      ...this.state,
      members
    })
user_104079360
Related