How to change array completely with a new array in React.JS with useState?

Question

I've been searching everywhere to find this but all the answers are about just adding new items to an array with useState.

So imagine I have an array like this

    [
        {
          id: 1,
          title: 'take out trash',
          done: false
        },
        {
          id: 2,
          title: 'wife to dinner',
          done: false
        },
        {
          id: 3,
          title: 'make react app',
          done: false
        },
    ]
  });

Now I want to change it with a completely new array by using useState.

Like,

{
    [
        {
          id: 5,
          title: 'X',
          done: true
        },
        {
          id: 8,
          title: 'Y',
          done: true
        },
        {
          id: 9,
          title: 'Z',
          done: true
        },
    ]
  })

Is this array a part of some kind of data?

Satel
– Satel

2022-06-06 21:35:11 +00:00
Commented Jun 6, 2022 at 21:35 — Satel
– Satel, Commented Jun 6, 2022 at 21:35

omar · Accepted Answer · 2022-06-06 21:47:34Z

3

first initialize the new array :

export default function App() {
  const newArray = [
    {
      id: 5,
      title: "X",
      done: true
    },
    {
      id: 8,
      title: "Y",
      done: true
    },
    {
      id: 9,
      title: "Z",
      done: true
    }
  ];
  ...

then:
1- import useState and useEffect from React
2- initiate your state
3- set your to the newArray inside the useEffect function
4- map your state array and return it to test

import { useEffect, useState } from "react";

export default function App() {
  const newArray = [
    {
      id: 5,
      title: "X",
      done: true
    },
    {
      id: 8,
      title: "Y",
      done: true
    },
    {
      id: 9,
      title: "Z",
      done: true
    }
  ];
  const [data, setData] = useState([]);
  useEffect(() => {
    setData(newArray);
  }, []);
  return (
    <div>
      {data
        ? data.map((o, i) => <div key={i}> title: {o.title} </div>)
        : "loading..."}
    </div>
  );
}

answered Jun 6, 2022 at 21:47

omar

5363 silver badges11 bronze badges

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

2 Comments

omar Over a year ago

a working sandbox can be found this link

dud3 Over a year ago

Thanks for the answer, I think it works with useEffect hook

Collectives™ on Stack Overflow

How to change array completely with a new array in React.JS with useState?

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