CODEWITHSUNDEEP
javascripthtmlreactjs
neca
neca

Reputation: 129

Handle change and select list of options

I'm new to React and I'm trying to select an option from the list and click the button to confirm the selection. I save the selected option in the "pickedUser" object. But when I change the state of the "pickedUser", I think the render is start again and the list is like at the beginning. I just want to select the option and click on the button without restarting select list. If you can help solve the problem and point out the mistakes I need to correct in order to get better. Thanks!

//pickedUser saving selected option from list.
constructor(props){
    super(props);
    this.state = {
      users: [],
      pickedUser:{
        name:"",
        email:"",
        uloga:""
      }, 
      isLoading: true,
      errors: null
    };
    this.handleChange = this.handleChange.bind(this);
    this.routeChange = this.routeChange.bind(this);
  }

//In handleChange I'm trying to set a value I get from select to pickedUser.
async handleChange(event) {

    const eName = event.target.value.split(',')[0];
    const eEmail = event.target.value.split(',')[1];
    const eUloga = event.target.value.split(',')[2];
    await this.setState({
      pickedUser:{
        name : eName,
        email: eEmail,
        role: eUloga
      }
    });
  }

//And this is a part of my render.
render() {
    const { isLoading, users, pickedUser } = this.state;
    return (
      <div>
        <select
          id="list"
          value={pickedUser}
          onChange={event => this.handleChange(event)}
        >
          {!isLoading ? (
            users.map((user, key) => (
              <option key={key}>
                {user.name},&emsp; {user.email}, &emsp; {user.role}
              </option>
            ))
          ) : (
            <p>Loading...</p>
          )}
        </select>
        <button id="b1" type="button"
          value={pickedUser}
          onClick={event => {
            this.handleSubmit(event);
            this.routeChange();
          }}>
          Sign in
        </button>

I wanted to function normally, that when I select the option, it stays selected, but it happens that when I select it, it is refreshed again. I just have to tell that the value is good when the option is selected but the display is not.

Upvotes: 0

Views: 1712

Answers (1)

Fyodor Yemelyanenko
Fyodor Yemelyanenko

Reputation: 11848

Technically you only have to correct this line

<select
    id="list"
    value={pickedUser.name + "," + pickedUser.email + "," + pickedUser.role}
    onChange={event => this.handleChange(event)}
>

value should not be object (pickedUser), but it should be string.

This is working example

But I can suggest following:

  1. Make state.users object (not array). Email should be unique, so it can be used as key. For example:

    this.state = { users: { "[email protected]": {name: "Jack", uloga: "aaa"},
    "[email protected]":  {name: "Mark", uloga: "aaa"} } }

    In this case you'll be able to extract user from users by it email.

    Object also support iteration like arrays useng Object.keys(users) or Object.values(users)

  2. Use email as key for <option>. Index as keys is not good practice in React.

  3. Add id to each <option> to easily identify selected option in event handler

Suggested version is here

Upvotes: 1

Related Questions