react onchange push values to objects

Question

I have an dynamic created fields (input tag)

const [data, setData] = useState({ native: [{}], rolls: [{}] }) // initial data

{navtive?.map((item, index) => {
    return (
        <input
        type="text"
        name={item.id}
        onChange={(e) =>
            handleChange("fee", e.target.value, index, item.id)
        }
        />
...
{rolls?.map((item, index) => {
    return (
        <input
        type="text"
        name={item.id}
        onChange={(e) =>
            handleChange("fee", e.target.value, index, item.id)
        }
        />

Expected Output:

const output = {
    native: [{id: 1, fee: "12"}, {id: 5, fee: "2"}],
    rolls: [{id: 4, fee: "1332"}],
};

onChange function :

const handleChange = (field, value, index) => {
    setData((prevState) => {
        const nextState = [...prevState];
        nextState[index][field] = value;
        return nextState;
    });
};

How to get the expected output ? What am I making wrong in the onChange function.

Thank you

The expected output doesn't make sense, since the maps are returning react components, not plain objects. — evolutionxbox
– evolutionxbox, Commented Dec 7, 2021 at 10:52
this is the expected output from onChange - [{id: 1, fee: "12"}, {id: 5, fee: "2"}] — Deepa
– Deepa, Commented Dec 7, 2021 at 10:54
@evolutionxbox That's not the problem. The problem is OP wants to spread it into an array and that will throw a TypeError. — Zsolt Meszaros
– Zsolt Meszaros, Commented Dec 7, 2021 at 11:02

Vitaliy Rayets · Accepted Answer · 2021-12-07 12:36:46Z

2

You must add more arguments to handleChange for this output. type - to understand what property is native or rolls. id - id from current data element. Example - sandbox

const handleChange = (type, field, value, index, id) => {
    setData((prevState) => {
      const nextState = [...prevState[type]];
      nextState[index] = {
        ...prevState[type][index],
        id,
        [field]: value
      };
      return {
        ...prevState,
        [type]: nextState
      };
    });
  };

JSX

handleChange("native", "free", e.target.value, index, item.id)

edited Dec 7, 2021 at 12:36

answered Dec 7, 2021 at 12:17

Vitaliy Rayets

2,4041 gold badge8 silver badges13 bronze badges

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

3 Comments

Deepa Over a year ago

TypeError: prevState[type] is not iterable ` const [data, setData] = useState([ { native: [{}], rolls: [{}] }, ]);`

Vitaliy Rayets Over a year ago

You have mistake , correct useState({ native: [{}], rolls: [{}] }) instead of const [data, setData] = useState([ { native: [{}], rolls: [{}] }, ]);

Vitaliy Rayets Over a year ago

data is object not array, see above your question

Collectives™ on Stack Overflow

react onchange push values to objects

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related