React array state is not Iterable

Question

I am trying to figure out how to pass an item thru the state on the item: [] inside the list state. Whenever I tried this code, an error shows up as lists is not iterable whenever I insert or add item to the array

Is there a way to insert data to the array property of the state? And adding more string arrays in that property?

const [lists, setLists] = useState({
  item: [],
});

const addList = () => {
  const listItem = document.getElementById("listItem");

  if (listItem.value !== "") {
    setLists([
      ...lists,
      {
        item: listItem.value,
      },
    ]); // >>> [INSERT TO THE ARRAY PROPERTY]
    listItem.value = "";
  }
};

return (
  <div>
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        id="listItem"
        name="item"
        onKeyPress={(e) => (e.key === "Enter" ? addList() : null)}
      />
      <button
        type="button"
        onClick={() => {
          addList();
        }}
      >
        Add
      </button>

      <ul>
        LIST
        {lists.item.map((val, index) => {
          return (
            <li key={index}>
              <p>{val}</p>
              <button type="button" onClick={() => removeList(index)}>
                Remove
              </button>
            </li>
          );
        })}
      </ul>
      <button type="submit">submit</button>
    </form>
  </div>
);

AKX · Accepted Answer · 2021-12-13 07:32:00Z

4

You seem to be having some confusion regarding your data types. lists is an array of objects of the shape {item: ...}.
- The useState call should be useState([]).
- You'll need lists.map(({item}, index) => (or lists.map(val and val.item) to get at the ....
- You can use e.g. console.log(lists), or a debugger, to see what's really happening.)
You shouldn't use document.getElementById() with React, ever. Instead, make the input controlled (or have a ref to it and read the value if you want uncontrolled, but you likely don't).
The setLists call should be the functional form: setLists(lists => [...lists, {item: listItem.value}]).

All in all, something like

function Component() {
  const [newItemText, setNewItemText] = React.useState("");
  const [todoList, setTodoList] = React.useState([]);

  const addList = (event) => {
    event.preventDefault();
    if (newItemText !== "") {
      setTodoList(todoList => [
        ...todoList,
        {
          item: newItemText,
        },
      ]);
      setNewItemText("");
    }
  };
  


  return (
    <div>
      <form onSubmit={addList}>
        <input
          type="text"
          name="item"
          value={newItemText}
          onChange={e => setNewItemText(e.target.value)}
        />
        <button
          type="submit"
        >
          Add
        </button>
      </form>

      <ul>
        LIST
        {todoList.map(({item}, index) => {
          return (
            <li key={index}>
              <p>{item}</p>
              <button type="button">
                Remove
              </button>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

ReactDOM.render(<Component />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.0/umd/react-dom.production.min.js"></script>
<div id="root">

edited Dec 13, 2021 at 7:32

answered Dec 13, 2021 at 7:22

AKX

171k17 gold badges148 silver badges230 bronze badges

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

2 Comments

Irving Real Over a year ago

I'm still pretty new on using React and trying to understand how they work. This was a test code for me and the reason why I did not use 'useState([])' is because I wanted to make the lists that contain set of objects inside like 'useState( { id:"", name: "", item: [] } )' where I can pass to the item:[] from that state

AKX Over a year ago

Your state isn't semantically "lists", though. If you wanted multiple to-do lists each with multiple items, then you'd want something like useState([{id: "list1", name: "Chores", items: [{id: "item1", text: "Take out the trash"}]}]) – that way it makes sense that lists is an array of lists.

Baris Tunar · Accepted Answer · 2021-12-13 07:26:09Z

1

const [lists, setLists] = useState({
  item: [],
});

In the code above you set initial value as an Object not an Array. Try to change code like below.

 const [lists, setLists] = useState([]);

answered Dec 13, 2021 at 7:26

Baris Tunar

1267 bronze badges

1 Comment

Irving Real Over a year ago

I tried this method but this is not exactly what I was looking for because I am trying to put several objects inside that state where 'item:[]' has already been declared. So an example would be like 'useState({name: "", item:[]})' .etc

Collectives™ on Stack Overflow

React array state is not Iterable

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related