How to change input value which is coming from props in React?

Question

I want to create a number of dynamic inputs in React, my code looks like:

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

const style = {
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  flexWrap: "wrap"
};

const dataarray = [
  { name: "name1", value: 12 },
  { name: "name2", value: 20 },
  { name: "name3", value: 30 },
  { name: "name4", value: 40 },
  { name: "name5", value: 50 }
];

export default function App() {
  const [data, setData] = useState(dataarray);

  const onChange = e => {
    setData({ [e.target.name]: e.target.value });
  };

  const onClick = e => {
    e.preventDefault();

    console.log("data ", data);
  };

  return (
    <div className="App" style={style}>
      {dataarray.map((item, index) => {
        return (
          <div key={index} style={{ display: "flex", flexDirection: "column" }}>
            <input
              type="text"
              style={{ marginTop: "100px" }}
              value={
                data.find(localItem => localItem.value === item.value).value
              }
              name={item.name}
              onChange={onChange}
            />
          </div>
        );
      })}
      <button onClick={onClick}>Submit</button>
    </div>
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

default state is coming is from probs, but when I change the value of any input it is breaking. This is the sandbox demo demo

is there any way I can change input value? appreciate any help

Answer 1

From the sandbox you provided, on line 27:

Simply change:

setData({inputs});

to:

setData(inputs);

this make the state from

{
  inputs: [
    // the inputs...
  ]
}

to:

[
  // the inputs...
]

Or just don't use array as your state

This will make everything much easier:

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

const style = {
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  flexWrap: "wrap"
};

const initialData = {
  "name1": 12,
  "name2": 20,
  "name3": 30,
  "name4": 40,
  "name5": 5
};

export default function App() {
  const [data, setData] = useState(initialData);

  const onChange = e => {
    setData({...data, [e.target.name]: e.target.value });
  };

  const onClick = e => {
    e.preventDefault();

    console.log("data ", data);
  };

  return (
    <div className="App" style={style}>
      {Object.keys(data).map((key, index) => {
        return (
          <div key={index} style={{ display: "flex", flexDirection: "column" }}>
            <input
              type="text"
              style={{ marginTop: "100px" }}
              value={data[key]}
              name={key}
              onChange={onChange}
            />
          </div>
        );
      })}
      <button onClick={onClick}>Submit</button>
    </div>
  );
}