Mapping useState array into input fields

Question

I am trying to map out the values in a state to make a dynamic input list. However, I am not quite sure how to correctly map it out. Any help would be greatly appreciated, thanks.

This is what I got:

 import React, { useState } from "react";

const Values = () => {
  const [values, setValues] = useState([
    { name: "sean", income: 0, spending: 0, investment: 0 },
    { name: "bobby", income: 0, spending: 0, investment: 0 },
    { name: "katie", income: 0, spending: 0, investment: 0 },
    { name: "mary", income: 0, spending: 0, investment: 0 },
    { name: "elly", income: 0, spending: 0, investment: 0 },
  ]);

  const allIncome = "adding up all the values of income here";

  return (
    <form className="box">
      {values.map(() => (
        <div className="container">
          <div>{values.name}</div>
          <input
            type="number"
            value={values.income}
            onChange={(e) => setValues({ income: e.target.value })}
          />
          <input
            type="number"
            value={values.spending}
            onChange={(e) => setValues.apply({ spending: e.target.value })}
          />
          <input
            type="number"
            value={values.investment}
            onChange={(e) => setValues({ investment: e.target.value })}
          />
        </div>
      ))}
      <input type="submit" />
    </form>
  );
};

export default Values;

It's really not clear what you want to do brother

ovalb
– ovalb

2021-08-06 00:15:32 +00:00
Commented Aug 6, 2021 at 0:15 — ovalb
– ovalb, Commented Aug 6, 2021 at 0:15

Drew Reese · Accepted Answer · 2021-08-06 00:40:59Z

For situations like this I recommend using a Higher Order Function to close over an id property, or an index if you aren't deleting or sorting records, in an onChange callback so you can uniquely identify the array element you want to update. From here you use the typical input name and value to apply the update.

Example:

const changeHandler = index => event => {
  const { name, value } = event.target;
  setValues(values => values.map((el, i) => index === i 
    ? {
        ...el,
        [name]: value,
      }
    : el,
  ));
};

When mapping the data you attach the callback and pass the current index. You should reference the current value element when passing/setting the value prop on each input, referencing the nested property of each data element. Don't forget to add a React key to the outermost mapped element

<form className="box">
  {values.map((value, index) => ( // <-- current element value and index
    <div
      key={index} // <-- add React key
      className="container"
    >
      <div>{value.name}</div> // <-- reference from current value
      <input
        type="number"
        name="income" // <-- name matches state field
        value={value.income}
        onChange={changeHandler(index)} // <-- add callback, pass current index
      />
      <input
        type="number"
        name="spending"
        value={value.spending}
        onChange={changeHandler(index)}
      />
      <input
        type="number"
        name="investment"
        value={value.investment}
        onChange={changeHandler(index)}
      />
    </div>
  ))}
  <input type="submit" />
</form>

Ideally, your data would have a dedicated GUID, such as an id property. This is preferable to using the index as the index isn't an intrinsic property of your data. The reason being is that now you can delete, sort, etc... the values array and the React key being the id of the element React can optimize rerendering the UI. See Lists & Keys for more in-depth explanation.

Updater using an id property:

const changeHandler = id => event => {
  const { name, value } = event.target;
  setValues(values => values.map((el) => el.id === id 
    ? {
        ...el,
        [name]: value,
      }
    : el,
  ));
};

...

<form className="box">
  {values.map((value) => ( // <-- current element value
    <div
      key={value.id} // <-- add React key
      className="container"
    >
      <div>{value.name}</div> // <-- reference from current value
      <input
        type="number"
        name="income"
        value={value.income}
        onChange={changeHandler(value.id)} // <-- add callback, pass current id
      />
      <input
        type="number"
        name="spending"
        value={value.spending}
        onChange={changeHandler(value.id)}
      />
      <input
        type="number"
        name="investment"
        value={value.investment}
        onChange={changeHandler(value.id)}
      />
    </div>
  ))}
  <input type="submit" />
</form>

Collectives™ on Stack Overflow

Mapping useState array into input fields

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related