ReactJS: Updating each element of a state array, with a different value

Question

I would like a little bit of help with the following situation in React JS: I have a state in one of my components which is an array of 3 json objects, like this:

 const [data, setData] = useState([ {name:'a'}, {name:'b'}, {name:'c'}])

And i also have an array of 3 random names:

const randomArray = ['d', 'e', 'f']

I wanna make a method that will take as an argument the randomArray and will update the new state like this:

data = [ {name:'d'}, {name:'e'}, {name:'f'}]

Any ideas?

Danys Chalifour · Accepted Answer · 2021-03-21 08:26:18Z

1

You can use the map function. It returns a new array from the callback function. You can return the name property like so;

import { useEffect, useState } from "react";

export default function App() {
  const [data, setData] = useState([
    { name: "a" },
    { name: "b" },
    { name: "c" }
  ]);
  const randomArray = ["d", "e", "f"];

  const setNewValues = () => {
    setData(randomArray.map(name=> ({ name})));
  };

  useEffect(() => {
    console.log(data);
  }, [data]);
  return (
    <div className="App">
      <button onClick={setNewValues}>Set Data </button>
    </div>
  );
}

edited Mar 21, 2021 at 8:26

answered Mar 21, 2021 at 8:14

Danys Chalifour

3201 gold badge5 silver badges12 bronze badges

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

2 Comments

kostas trip Over a year ago

Thanks a lot :) If my initial state instead of one attribute per json [{ name: 'a' }, etc.] , had two attributes for each json (e.g [{name:'a', number:4}, {name:'b', number:3}, {name:'c', number:2}] ), what would be the solution then? The final state I would like to have in this example is this: data = [ {name:'d' , number:4 } , {name:'e', number:3} , {name:'f', number:2} ]

Danys Chalifour Over a year ago

you would then fully declare the callback function from map like so; setData(randomArray.map((item,index)=> { return { name:item.name, number:item.number } }));

Syed Mohib Uddin · Accepted Answer · 2021-03-21 07:50:28Z

0

This is one way you can do it.

const ArrChange = () => {
 const randomArray = ['d', 'e', 'f'];
 const [data, setData] = useState([ {name:'a'}, {name:'b'}, {name:'c'}]) 
 const setData = () => {
   for(let i = 0; i < randomArray.lenght; i++)
      d[i].name = randomArray[i];
 }

 <Button onClick={setData}>
          Update
      </Button>
 }

answered Mar 21, 2021 at 7:50

Syed Mohib Uddin

7167 silver badges16 bronze badges

2 Comments

Janez Kuhar Over a year ago

You are re-defining the function returned by the hook. Don't do that.

Syed Mohib Uddin Over a year ago

@Janez please correct my code appreciated (y)

dakshkhetan · Accepted Answer · 2021-03-21 08:19:35Z

0

Here you go! :)

const convertToJSON = array => {
  setData(array.map(name => ({ name })));
};

answered Mar 21, 2021 at 8:19

dakshkhetan

11 silver badge1 bronze badge

1 Comment

Janez Kuhar Over a year ago

Code without an explanation is rarely useful, however. At least provide a sentence or two to explain what’s going on. Answering Technical Questions Helpfully

Collectives™ on Stack Overflow

ReactJS: Updating each element of a state array, with a different value

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related