CODEWITHSUNDEEP
javascriptreactjs
Mellisa
Mellisa

Reputation: 605

push empty array into react's state

http://jsbin.com/zehoceloka/1/edit

my input number is dynamic, it depends on the API how many data it has. So firstly I map it to the view. But there is also a feature where user can add new item. I trying to push a new empty array, but nothing happens. Am I doing it wrong?

class HelloWorldComponent extends React.Component {

  constructor(){
    super()
    this.addNewRow = this.addNewRow.bind(this);
    this.state = {
      "rules":[
        "age must be above 10",
        "must wear shoe"
      ]
    }
  }

  addNewRow(e){
    const updated = this.state.rules.push("");
    this.setState({rules:updated});
  }


  render() {
    return (
      <div>
        {this.state.rules.map(obj => 
           <input type="text" defaultValue={obj} />
         )}
         <button>Add New Rules</button>
         <br /><br />
         <pre>{JSON.stringify(this.state.rules,null,2)}</pre>
       </div>
    );
  }
}

Upvotes: 2

Views: 14299

Answers (3)

Mayank Shukla
Mayank Shukla

Reputation: 104369

You forgot to define the click event on button, use this:

<button onClick={this.addNewRow}>Add New Rules</button>

Few issues in this line:

const updated = this.state.rules.push("");

1.Never mutate the state variable directly by this.state.a.push() or this.state.a = '', always use setState to update the value.

2.a.push() will not return the updated array, it will return the value pushed into array.

From Doc:

Never mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.

Check this working code:

class HelloWorldComponent extends React.Component {
  
  constructor(){
    super()
    this.addNewRow = this.addNewRow.bind(this);
    this.state = {
      rules:[
        "age must be above 10",
        "must wear shoe"
      ]
    }
  }
  
  addNewRow(e){
    let updated = this.state.rules.slice();
    updated.push("");
    this.setState({rules:updated});
  }
    
  
  render() {
    return (
      <div>
        {this.state.rules.map(obj => 
           <input type="text" defaultValue={obj} />
         )}
         <button onClick={this.addNewRow}>Add New Rules</button>
         <br /><br />
         <pre>{JSON.stringify(this.state.rules,null,2)}</pre>
       </div>
    );
  }
}

ReactDOM.render(
  <HelloWorldComponent />,
  document.getElementById('react_example')
);
<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='react_example'/>

Upvotes: 1

Pablo Lozano
Pablo Lozano

Reputation: 10342

The objects in the state cannot be modify, you need to extract them, modify and then add again to the state:

addNewRow(e){
  let rules=this.state.rules.slice();
  rules.push('');
  this.setState({rules:rules});
}

Upvotes: 1

Nitesh
Nitesh

Reputation: 1550

Please try like this:

var arr = this.state.rules.slice();
arr.push("");
this.setState({ rules: arr });

Upvotes: 0

Related Questions