React: Inputs not updating different values

Question

I have a simple list where in each li there is radio inputs to choose from.

Whenever I select an option, all the inputs in all the other elements are updating with the same option. I included a unique id and a unique name as mentionned in React docs to regroup each group and make it separate but it didn't work.

I want to be able to select every element separately in the list. How to do so ?

https://codesandbox.io/s/affectionate-sun-i2khx?file=/src/App.js

import React, { useState } from "react";

export default () => {
  const initialList = [
    {
      id: "1",
      name: "John"
    },
    {
      id: "2",
      name: "Eric"
    },
    {
      id: "3",
      name: "Jonathan"
    }
  ];

  const handleChangeSelected = (event) => {
    setSelected(event.target.value);
    console.log(event);
  };

  const [list, setList] = useState(initialList);
  const [Selected, setSelected] = useState("option1");

  return (
    <div>
      <ul>
        <div>
          {list.map((item) => (
            <li key={item.id}>
              <div>
                <div className="users">{item.name}</div>
                <p />{" "}
                <input
                  type="radio"
                  id={item.id}
                  name={item.id}
                  value="option1"
                  checked={Selected === "option1"}
                  onChange={handleChangeSelected}
                />
                <label for="huey">Option 1</label>
              </div>
              <div>
                <input
                  type="radio"
                  id={item.id}
                  name={item.id}
                  value="option2"
                  checked={Selected === "option2"}
                  onChange={handleChangeSelected}
                />
                <label for="dewey">Option 2</label>
              </div>
              <div>
                <input
                  type="radio"
                  id={item.id}
                  name={item.id}
                  value="option3"
                  checked={Selected === "option3"}
                  onChange={handleChangeSelected}
                />
                <label for="louie">Option 3</label>
              </div>
              <br />
            </li>
          ))}
        </div>
      </ul>
    </div>
  );
};

https://codesandbox.io/s/affectionate-sun-i2khx?file=/src/App.js

What I tried so far but didn't work to target the input to the corresponding id

  function handleSelected(e, id) {
    setSelected({
      ...Selected,
      [id]: Selected[id]
    });
  }

I checked that is why I am asking why not just put a selected key in each object of array! — DEEPAK
– DEEPAK, Commented Apr 11, 2021 at 14:27
like { id: "1", name: "John", selected: "option1" }, { id: "2", name: "Eric", selected: "option2" }, { id: "3", name: "Jonathan", selected: "option1" } — DEEPAK
– DEEPAK, Commented Apr 11, 2021 at 14:28

DEEPAK · Accepted Answer · 2021-04-11 14:31:29Z

2

If you can put selected key in your intiallist array value then you can handle like below

import React, { useState } from "react";

export default () => {
  const initialList = [
    {
      id: "1",
      name: "John",
      selected: "option1"
    },
    {
      id: "2",
      name: "Eric",
      selected: "option2"
    },
    {
      id: "3",
      name: "Jonathan",
      selected: "option1"
    }
  ];

  const handleChangeSelected = (index, option) => {
    const cloneList = [...list];
    cloneList[index].selected = option;
    setList(cloneList);
  };

  const [list, setList] = useState(initialList);

  return (
    <div>
      <ul>
        <div>
          {list.map((item, index) => (
            <li key={item.id}>
              <div>
                <div className="users">{item.name}</div>
                <p />{" "}
                <input
                  type="radio"
                  id={item.id}
                  name={item.id}
                  value="option1"
                  checked={item.selected === "option1"}
                  onChange={() => handleChangeSelected(index, "option1")}
                />
                <label for="huey">Option 1</label>
              </div>
              <div>
                <input
                  type="radio"
                  id={item.id}
                  name={item.id}
                  value="option2"
                  checked={item.selected === "option2"}
                  onChange={() => handleChangeSelected(index, "option2")}
                />
                <label for="dewey">Option 2</label>
              </div>
              <div>
                <input
                  type="radio"
                  id={item.id}
                  name={item.id}
                  value="option3"
                  checked={item.selected === "option3"}
                  onChange={() => handleChangeSelected(index, "option3")}
                />
                <label for="louie">Option 3</label>
              </div>
              <br />
            </li>
          ))}
        </div>
      </ul>
    </div>
  );
};

verify here https://codesandbox.io/s/thirsty-kirch-fwhpb?file=/src/App.js

answered Apr 11, 2021 at 14:31

DEEPAK

1,57415 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

AlyaKra Over a year ago

Thank you very much! I see you completely changed handleChangeSelected while adding selected. Although this is working fine, is there any other method where it doesn't require adding selected at all ?

DEEPAK Over a year ago

yes, that would increase few more lines. just like you have mentioned snippet in tried section

DEEPAK Over a year ago

here codesandbox.io/s/romantic-framework-z3tk2?file=/src/App.js

AlyaKra Over a year ago

Thank you again. I see that checked is different in some fields, is it on purpose ?

DEEPAK Over a year ago

yes, you have to put some conditions, on the first input my condition says if it has nothing by default set selected to first input

Hagai Harari · Accepted Answer · 2021-04-12 09:32:33Z

1

Selected state is just one string living above the map function. Consider declare it inside the map -

// refactor your main component
{list.map((item) => (
          <ListItem item={item} />  
))}





// create new ListItem component, Selected state declared here
const ListItem = ({item}) => {
  const handleChangeSelected = (event) => {
    setSelected(event.target.value);
    console.log(event);
  };

  const [Selected, setSelected] = useState("option1");
  return <li key={item.id}>
              <div>
                <div className="users">{item.name}</div>
                <p />{" "}
                <input
                  type="radio"
                  id={item.id}
                  name={item.id}
                  value="option1"
                  checked={Selected === "option1"}
                  onChange={handleChangeSelected}
                />
                <label for="huey">Option 1</label>
              </div>
              <div>
                <input
                  type="radio"
                  id={item.id}
                  name={item.id}
                  value="option2"
                  checked={Selected === "option2"}
                  onChange={handleChangeSelected}
                />
                <label for="dewey">Option 2</label>
              </div>
              <div>
                <input
                  type="radio"
                  id={item.id}
                  name={item.id}
                  value="option3"
                  checked={Selected === "option3"}
                  onChange={handleChangeSelected}
                />
                <label for="louie">Option 3</label>
              </div>
              <br />
            </li>
}

Now each mapped item manage its own Selected state

edited Apr 12, 2021 at 9:32

answered Apr 11, 2021 at 14:38

Hagai Harari

2,8673 gold badges14 silver badges27 bronze badges

2 Comments

AlyaKra Over a year ago

I like this method better because it doesn't require much change in the code. Can you please modify it [here] codesandbox.io/s/thirsty-kirch-fwhpb?file=/src/App.js ? For some reason I have error and I think I'm missing something.

Hagai Harari Over a year ago

Edit my answer with comments

Collectives™ on Stack Overflow

React: Inputs not updating different values

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related