How to group array of objects and update the state in react React

Question

I have a state that contains an array of objects. I added order so I can group the object based on the order. A new bunch of objects will be created when a button is clicked and the new objects order value will increase

const initialData = [
  {
    name: "point",
    label: "Point",
    order: 1
  },
  {
    name: "optionA",
    label: "A",
    order: 1
  },
  {
    name: "optionB",
    label: "B",
    order: 1
  },
];

Here is what I tried. I used reduce to group the data based on order when a button is clicked. The order value changes but the array the new array is not populating

const [formData, setFormData] = useState(initialData)

const addMoreField = () => {
    const groups = formData.reduce(
      (groups, item) => ({
        ...groups,
        [item.order]: [
          ...(groups[item.order] || []),
          { ...item, order: item.order++ }
        ]
      }),
      {}
    );

setFormData(groups)

 console.log("groups", groups);
    console.log("formData", formData);
}

The addMoreField function is supposed to increment the order and create a new array with more groups.

const newData = [
1: [
  {
    name: "point",
    label: "Point",
    order: 1
  },
  {
    name: "optionA",
    label: "A",
    order: 1
  },
  {
    name: "optionB",
    label: "B",
    order: 1
  },
],

2: [
  {
    name: "point",
    label: "Point",
    order: 2
  },
  {
    name: "optionA",
    label: "A",
    order: 2
  },
  {
    name: "optionB",
    label: "B",
    order: 2
  },
]
]

implementation on codesandbox

Change it to item.order+1, item.order++ increments order in the original state (which is not good), but returns the value of item.order before any increment occurs — Nick Parsons
– Nick Parsons, Commented Dec 21, 2022 at 23:21

John Li · Accepted Answer · 2022-12-22 12:30:36Z

2

Update

Not sure if I fully understand the goal, but I did some modification in the posted sandbox so that the solution in the original answer is wired up with existing code.

Also modified the onChange handler a bit so that it correctly record data to state object for the output with submit.

Forked demo with modifications: codesandbox

Firstly the use of initial value changed so that it can be properly mapped:

const [formData, setFormData] = React.useState([initialData]);

Also changed the format for map() as the following. The onChange is modified so that it accepts value from multiple fields to add to the state object:

<form>
  <div className="wrapper">
    {formData.map((field, index) => (
      <div key={index}>
        <p>{`field ${index + 1}`}</p>
        {field.map((data, index) => (
          <div key={index} className="form-data">
            <label>{data.name}</label>
            <input
              type="text"
              name={data.name}
              onChange={(e) =>
                setState((prev) => ({
                  ...prev,
                  [data.order]: {
                    ...prev[data.order],
                    [data.name]: e.target.value,
                  },
                }))
              }
            />
          </div>
        ))}
      </div>
    ))}
  </div>
</form>

Original

It seems that the posted initialData is an array but the newData looks like an object. According to description in the question, perhaps it should be an array of "group" but adding a new group with order + 1 in the desired result?

The below example modifies addMoreField so that it first find the latest order from old groups, and then return a new array adding the new group with latestOrder + 1.

Some lists of initial and new data are also added but they're for testing only.

This example runs in snippets for convenience:

const initialData = [
  {
    name: "point",
    label: "Point",
    order: 1,
  },
  {
    name: "optionA",
    label: "A",
    order: 1,
  },
  {
    name: "optionB",
    label: "B",
    order: 1,
  },
];

const App = () => {
  const [formData, setFormData] = React.useState(initialData);

  const addMoreField = () =>
    setFormData((prev) => {
      const oldGroups = Array.isArray(prev[0]) ? [...prev] : [[...prev]];
      const latestOrder = oldGroups.reduce(
        (acc, cur) => (cur[0].order > acc ? cur[0].order : acc),
        0
      );
      const newGroup = oldGroups[0].map((item) => ({
        ...item,
        order: latestOrder + 1,
      }));
      return [...oldGroups, newGroup];
    });

  return (
    <main>
      <button onClick={addMoreField}>ADD GROUP</button>
      <section>
        <div>
          <h3>👇 initialData: </h3>
          {initialData.map((item, index) => (
            <ul key={index}>
              <li>{`name: ${item.name}`}</li>
              <li>{`label: ${item.label}`}</li>
              <li>{`order: ${item.order}`}</li>
            </ul>
          ))}
        </div>
        {Array.isArray(formData[0]) && (
          <div>
            <h3>👇 Current formData (newData): </h3>
            {formData.map((group, index) => (
              <React.Fragment key={index}>
                {group.map((item, index) => (
                  <ul key={index}>
                    <li>{`name: ${item.name}`}</li>
                    <li>{`label: ${item.label}`}</li>
                    <li>{`order: ${item.order}`}</li>
                  </ul>
                ))}
              </React.Fragment>
            ))}
          </div>
        )}
      </section>
    </main>
  );
};

const root = ReactDOM.createRoot(document.getElementById("root")).render(
  <App />
);

section {
  display: flex;
  gap: 80px;
}

button {
  padding: 9px;
}

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

edited Dec 22, 2022 at 12:30

answered Dec 22, 2022 at 0:41

John Li

7,4973 gold badges7 silver badges29 bronze badges

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

4 Comments

Haq Over a year ago

Thank you. It gives me the expected output. However I used useEffect to load the Current formData when the page loads, but the data render multiple times. I would like the form to display instantly when the page loads and subsequently clicking on the button to add more filed

John Li Over a year ago

@Haq Indeed this only considered the posted scenario where initial data is given. Perhaps share some more details about the use case so that we can see if we might be possible to help?

Haq Over a year ago

I have added codesandbox link to the question. The use case is when a user want to submit batch data. In this scenario when a button is clicked a copy of that field should display and the data can be summited at once

John Li Over a year ago

@Haq Thanks for the update, not sure if I fully understand the goal but I wired up the sandbox code with the solution from the answer, so that it might be further adjusted to meet desired result. Details are updated in the answer as well and hopefully it could help.

Collectives™ on Stack Overflow

How to group array of objects and update the state in react React

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related