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 stackoverflow.com/questions/26253351/… just remind that state is meant to be immutable — Diego Castro
– Diego Castro, Commented Sep 25, 2018 at 14:56
Possible duplicate of Correct modification of state arrays in ReactJS — Code-Apprentice
– Code-Apprentice, Commented Sep 25, 2018 at 14:57

Code-Apprentice · Accepted Answer · 2018-09-25 14:56:16Z

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, 2018 at 14:56

Code-Apprentice

84k26 gold badges162 silver badges289 bronze badges

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

1 Comment

Melissa94 Over a year ago

but hardcoding like this will have twice declaration isn't it? what if the data is big?

Shubham Gupta · Accepted Answer · 2018-09-25 15:03:37Z

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, 2018 at 15:03

Shubham Gupta

2,6461 gold badge10 silver badges19 bronze badges

1 Comment

Melissa94 Over a year ago

why there's an upvote for mutate state? can't it be this.setState({ inputs: [...this.state.inputs, {name: 'etc', value:''}] }); ?

hamodey · Accepted Answer · 2018-09-25 16:02:13Z

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>

Collectives™ on Stack Overflow

add array of object into self array of object using setState

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related