How to pre-populate fields on click of a button in react?-CodePudding

I am trying to pre-populate the form fields, that are replicated, from the fields that are already filled. On clicking the "Add fields" button, the fields are getting replicated. But I want them to get pre-populated using the data filled in the already existing fields.

From where can I get hold of the input values?

import './style.css';

export default function App() {
  const [inputFields, setInputFields] = useState([{ name: '', age: '' }]);

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

    let newField = { name: "", age: '' };
    setInputFields([...inputFields, newField]);
  };

  const handleFormChange = (index, e) => {
    let data=[...inputFields];
    data[index][e.target.name]=[e.target.value];
    setInputFields(data);
  }

  return (
    <div>
      <form>
        {inputFields.map((input, index) => {
          return (
            <div key={index}>
              <input
                type="text"
                name="name"
                placeholder="Enter name"
                value={input.name}
                onChange={(e)=>handleFormChange(index, e)}
              />
              <input
                type="number"
                name="age"
                placeholder="Enter Age"
                value={input.age}
                onChange={(e)=>handleFormChange(index, e)}
              />
              <br />
              <br />
            </div>
          );
        })}
        <button onClick={addFields}>Add Field</button>
        <br />
      </form>
    </div>
  );
}```

CodePudding user response：

You have to set the value property on the input field to populate, e.g:

<input
  value={input.name}
  type="text"
  name="name"
  placeholder="Enter name"
/>

CodePudding user response：

You will need to track changes in input with an onChange handler.

Also, you are not setting values from the last input fields anywhere to be able to duplicate them. The below code might work as you expect:

const { useState } = React;

function App() {
  const [inputFields, setInputFields] = useState([{ name: '', age: '' }]);

  const addFields = (e) => {
    e.preventDefault();
    const temp = inputFields.slice()
    , length = temp.length - 1
    , { name, age } = temp[length]
    
    // Set value from last input into the new field
    let newField = { name, age }
    setInputFields([...temp, newField])
  }
  , handleChange = (index, event) => {
    const temp = inputFields.slice() // Make a copy of the input array first.
    inputFields[index][event.target.name] = event.target.value // Update it with the modified values.
    setInputFields(temp) // Update the state.
  };

  return (
    <div>
      <form>
        {inputFields.map((input, index) => {
          return (
            <div key={index}>
              <input
                onChange={e => handleChange(index, e)}
                value={input.name}
                type="text"
                name="name"
                placeholder="Enter name"
              />
              <input
                onChange={e => handleChange(index, e)}
                value={input.age}
                type="number"
                name="age"
                placeholder="Enter Age"
              />
              <br />
              <br />
            </div>
          );
        })}
        <button onClick={addFields}>Add Field</button>
        <br />
      </form>
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById("react")
);

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