score:1

Accepted answer

you are mapping the selecteditem array for every element in the item array. this means for any element in the array that some condition matches and both the input and label are rendered.

if i understand the code and your expected behavior i think you should conditionally render a single input or label based on if the selecteditem array includes an element matching by id.

example:

<div classname="app">
  {items.map((item) => (
    <div classname="issue">
      <input type="checkbox" onchange={(e) => handleselect(e, item)} />
      <label>{item.name}</label>
      {selecteditem.length ? (
        selecteditem.some((singleitem) => singleitem.id === item.id) ? (
          <input type="number" />
        ) : (
          <label>not selected</label>
        )
      ) : (
        "list is empty"
      )}
    </div>
  ))}
</div>

edit how-to-compare-objects-of-two-different-arrays-in-javascript


Related Query

More Query from same tag