add array of object into self array of object using setState

Question

How can I add new row for my array of object?

class App extends React.Component {
  state = {
    inputs: [{
      name: 'firstname',
      value: ''
    },{
      name: 'lastname',
      value: ''
    }]
  }
  addRow = () => {
    //what to do here
  }
  render() {
    return(
      <div>
        {this.state.inputs.map(input => <input placeholder={input.name} type="text" />)}
         <button onClick={this.addRow}>add row</button>
        </div>
    )
  }
}

https://codesandbox.io/s/mz8v7v4y99

do I have to use lodash's deepClone in this case?

take a look at https://stackoverflow.com/questions/26253351/correct-modification-of-state-arrays-in-reactjs just remind that state is meant to be immutable — Diego Castro, Sep 25 '18 at 14:56
Possible duplicate of [Correct modification of state arrays in ReactJS](https://stackoverflow.com/questions/26253351/correct-modification-of-state-arrays-in-reactjs) — Code-Apprentice, Sep 25 '18 at 14:57

score 2 · Answer 1 · answered Sep 25 '18 at 14:56

2

You don't necessarily need to make copies. Reusing the same objects in your array is acceptable:

this.setState({inputs: [...this.state.inputs, {name: 'foo', value: ''}]});

answered Sep 25 '18 at 14:56

Code-Apprentice

81,660
23
145
268

but hardcoding like this will have twice declaration isn't it? what if the data is big? – Melissa94 Sep 25 '18 at 22:59

score 1 · Answer 2 · answered Sep 25 '18 at 15:03

1

Take a look at the sandbox I have created. https://codesandbox.io/s/xj1zz7m5wq

Here is I have used spread operator to make copies of existing inputs array and inserted data into that array.

addRow = () => {
    const inputs = [...this.state.inputs];
    inputs.push({
      name: "dummyname",
      value: ""
    });
    this.setState({
      inputs
    });
  };

answered Sep 25 '18 at 15:03

Shubham Gupta

2,596
1
8
19

why there's an upvote for mutate state? can't it be `this.setState({ inputs: [...this.state.inputs, {name: 'etc', value:''}] });` ? – Melissa94 Sep 26 '18 at 00:53

score 0 · Answer 3 · answered Sep 25 '18 at 16:02

first, you have to set the state same as below

and to add a new row you can use spread operator

const newState = [...this.state.inputs, newRow];

I rewrite your code so you can look at it and try to understand it

class App extends React.Component {
  state = {
    inputs: [
      {
        firstname: 'Ibrahim',
        lastname: 'Doe'
      },
      {
        firstname: 'Mohammed',
        lastname: 'Jon'
      }
    ],
    inputFirstname: '',
    inputLastame: ''
  };

  handleOnChange = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

  addRow = e => {
    e.preventDefault();
    const newRow = {
      firstname: this.state.inputFirstname,
      lastname: this.state.inputLastame
    };
    const newState = [...this.state.inputs, newRow];
    this.setState({
      inputs: newState,
      inputFirstname: '',
      inputLastame: ''
    });
  };

  render() {
    return (
      <form>
        {this.state.inputs.map(input => (
          <div key={input.firstname}>
            <input placeholder={input.firstname} type="text" />
            <input placeholder={input.lastname} type="text" />
          </div>
        ))}
        <input
          onChange={this.handleOnChange}
          placeholder="firstname"
          type="text"
          name="inputFirstname"
          value={this.state.inputFirstname}
        />
        <input
          onChange={this.handleOnChange}
          placeholder="lastname"
          type="text"
          name="inputLastame"
          value={this.state.inputLastame}
        />
        <button onClick={this.addRow}>add row</button>
      </form>
    );
  }
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='root'></div>

add array of object into self array of object using setState

3 Answers3