How to push an object in an array, using react hooks and typscript?

Question

I know this is completely a noob question and I'm sorry but I try to figure out how should I manage to put the Object in the state array when submitting the form. Thank you

interface newList {
  name: string;
}

const ListAdder = () => {
  const [listName, setListName] = useState("");
  const [listArray, setListArray] = useState<any>([]);

  const submitHandler = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    const myNewList: newList = {
      name: listName,
    };

    setListArray([...listArray].push(myNewList));
    setListName("");
    console.log(listArray);
  };

  const listNameHandler = (e: FormEvent<HTMLInputElement>) => {
    setListName(e.currentTarget.value);
  };

  return (
    <>
      <form onSubmit={submitHandler}>
        <label>Create your List</label>
        <br />
        <input
          type="text"
          placeholder="List name is..."
          value={listName}
          onChange={listNameHandler}
        />
        <button type="submit">Add the List</button>
      </form>
    </>
  );
};

Change this setListArray([...listArray].push(myNewList)); to setListArray([...listArray, myNewList]); — Akhil
– Akhil, Commented May 28, 2021 at 18:50

Drew Reese · Accepted Answer · 2021-05-28 18:51:25Z

2

The issue is that you are saving the result of the push, the new length, instead of the updated array.

setListArray([...listArray].push(myNewList)); // <-- saves result of push, [].length

You can concat the new element:

setListArray([...listArray].concat(myNewList));

Or just append it

setListArray([...listArray, myNewList]);

Additional semi-related issue, you can't console log the state and expect to see it immediately updated.

setListArray([...listArray, myNewList]);
console.log(listArray); // <-- still current state

React state updates are asynchronous, so logging the state like this will only ever log the state from the current render cycle and not the enqueued state for the next render cycle. If you want to log state after an update use an useEffect hook with dependency.

useEffect(() => {
  console.log(listArray);
}, [listArray]);

answered May 28, 2021 at 18:51

Drew Reese

207k19 gold badges280 silver badges292 bronze badges

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

2 Comments

Mugi Over a year ago

Thank you for the details and works. Just one thing, which type should I use in place of <any> in the state declaration?

Drew Reese Over a year ago

@Mugi I'm not super familiar with Typescript, but from what I can tell, maybe useState<newList []>([]); if I haven't bunged up the syntax, in other words, it's an array of newList types, i.e. newList[]. Looks like useState<Array<newList>>([]); may also work. typescriptlang.org/docs/handbook/2/everyday-types.html#arrays

Collectives™ on Stack Overflow

How to push an object in an array, using react hooks and typscript?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related