Fill an object dynamically in react with values from an array

Question

I'm trying to fill an object with values that I'm getting from an array of objects but it's not working as expected.

This is a simplified code example

https://codesandbox.io/s/crazy-nobel-c7xdb?file=/src/App.js

import "./styles.css";
import React, { useEffect, useState } from "react";

export default function App() {
  const [fieldsValues, setFieldsValues] = useState({});
  const items = [{ value: "a" }, { value: "b" }, { value: "c" }];

  useEffect(() => {
    items.map((item, index) => {
      return setFieldsValues({
        ...fieldsValues,
        [index]: item.value
      });
    });
  }, []);

  return (
    <div className="App">
      <h2> {` fieldsValues = ${JSON.stringify(fieldsValues)}`} </h2>
    </div>
  );
}

I want the fieldsValues to return this:

{
  0: "a",
  1: "b",
  2: "c"
}

What I'm getting now:

fieldsValues = {"2":"c"}

Rahul Sharma · Accepted Answer · 2021-12-28 13:24:16Z

3

You fix it by doing this

useEffect(() => {
  items.map((item, index) => {
    return setFieldsValues((prev) => ({
      ...prev,
      [index]: item.value,
    }));
  });
}, []);

Better way of doing this is

useEffect(() => {
  const data = items.reduce(
    (prev, item, index) => ({ ...prev, [index]: item.value }),
    {}
  );

  setFieldsValues((prev) => ({ ...prev, ...data }));
}, []);

edited Dec 28, 2021 at 13:24

answered Dec 28, 2021 at 13:19

Rahul Sharma

10.1k1 gold badge20 silver badges41 bronze badges

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

Comments

Ori Drori · Accepted Answer · 2021-12-28 13:26:56Z

To create the object map the array to [index, value] pairs, and convert to an object with Object.fromEntries():

const items = [{ value: "a" }, { value: "b" }, { value: "c" }];

const result = Object.fromEntries(items.map(({ value }, index) => [index, value]))

console.log(result)

However, the way you are using the array, and then need to set the state doesn't actually makes sense in the react context.

If the array is a prop, you should add it to useEffect as a dependency:

const arrToObj = items => Object.fromEntries(items.map(({ value }, index) => [index, value]))

export default function App({ items }) {
  const [fieldsValues, setFieldsValues] = useState({});

  useEffect(() => {
    setState(() => arrToObj(items))
  }, [items]);
  
  ...

If it's a static array, set it as the initial value of setState:

const arrToObj = items => Object.fromEntries(items.map(({ value }, index) => [index, value]))

const items = [{ value: "a" }, { value: "b" }, { value: "c" }];
    
export default function App({ items }) {
  const [fieldsValues, setFieldsValues] = useState(() => arrToObj(items));
      
  ...

RamTn · Accepted Answer · 2021-12-28 13:25:40Z

0

By your way It would be like this

  useEffect(() => {
    let test={}
    items.map((item, index) => {
      return setFieldsValues((prev)=>{
        return {
        ...prev,
        [index]: item.value
      }
      });
    });
  }, []);

answered Dec 28, 2021 at 13:25

RamTn

995 bronze badges

Collectives™ on Stack Overflow

Fill an object dynamically in react with values from an array

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related