want to insert data in table in reactjs

Question

i have table and in first three rows of table is hardcoded,also i have multiple inputs and when i enter data in input and when i clicked on submit button the data from inputs should goes into table row . here is my code

 this.state={
            Id:'',
            Name:'',
            birth:'',
            data:[
                {
                id:'1',
                name:'Muhammad Ali jinnah',
                dateofBirth:'1876'
                },
                {
                    id:'2',
                    name:'Allama Iqbal',
                    dateofBirth:'1877'
                },
                {
                    id:'3',
                    name:'Ahmad Bilal',
                    dateofBirth:'1992'
                }
            ]
        }
    }
    this.handleIDChange = this.handleIDChange.bind(this);
    this.handleNameChange = this.handleNameChange.bind(this);
    this.handleBirthChange = this.handleBirthChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
}
handleIDChange(event) {
    this.setState({Id: event.target.value});
  }
  handleNameChange(event) {
    this.setState({Name: event.target.value});
  }
  handleBirthChange(event) {
    this.setState({birth: event.target.value});
  }

  handleSubmit(event) {
    console.log('A ID:name and birth was submitted: ' + this.state.Id,this.state.Name,this.state.birth);
    event.preventDefault();
  }
 render() {
return (
  <div className="fun3">
    <BootstrapTable data={this.state.data}>
 <TableHeaderColumn isKey dataField='id' headerAlign="left" width="30"tdStyle={ {backgroundColor: ''}}>
          ID
   </TableHeaderColumn>
 <TableHeaderColumn dataField='name' dataAlign='center'headerAlign="center" width="60%" thStyle={ {fontWeight: 'lighter', marginLeft:'5px'}}>
        Name
</TableHeaderColumn>
 <TableHeaderColumn dataField='dateofBirth'dataAlign='center' headerAlign="right">
       Date of Birth
 </TableHeaderColumn>

    </BootstrapTable>
<br></br>
<form onSubmit={this.handleSubmit}>
<label>
 ID:
 <input type="text" name="Id"  onChange={this.handleIDChange} />
 </label>
 <label>
 Name:
 <input type="text" name="name"  onChange={this.handleNameChange}/>
   </label>
 <label>
 Date of Birth
  <input type="text" name="birth" onChange={this.handleBirthChange}/>
 </label>
<input type="submit" value="Submit" />
</form>
  </div>

this is my code i want to insert data after next to three rows..how i can do this ?

possible duplicate question stackoverflow.com/a/49785510/1502207 — Paul McLoughlin
– Paul McLoughlin, Commented Apr 13, 2018 at 21:03

Yossi · Accepted Answer · 2018-04-14 19:54:11Z

1

handleSubmit(event) {

  console.log('A ID:name and birth was submitted: ' + 
    this.state.Id,this.state.Name,this.state.birth);
  event.preventDefault();

  const { id, name, dateofBirth } = this.state;    
  const newObj = {
    id: id,
    name: name,
    dateofBirth: dateofBirth 
  };

  console.log("prevState");
  console.log(prevState);
  console.log(newState);
  console.log([...prevState.data, newObj]);
  this.setState(prevState => ({
    data: [...prevState.data, newObj ]
  }));

}

edited Apr 14, 2018 at 19:54

answered Apr 12, 2018 at 19:47

Yossi

6,0877 gold badges50 silver badges83 bronze badges

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

11 Comments

ahmad bilal Over a year ago

can u explain it properly ??i cannt get it properly

Yossi Over a year ago

I assume that in handleSubmit you have id, name, dateofBirth, in the state, right? Then the above code takes these values, creats newObj that has these values, and sets the states so that the array in the state gets the newObj as last array element...

ahmad bilal Over a year ago

const { id, name, dateofBirth } = this.state; const newObj = { id: id, name: name, dateofBirth: dateofBirth };the id,name and date of birth and the name,id,and dateofbirth in obects are same ??

ahmad bilal Over a year ago

you ask to create new object for id,name and dateofbirth??this object for that value which i get from input box ?

Yossi Over a year ago

Yes. Just to have an object that will be used in the call to setState in my answer

|

Collectives™ on Stack Overflow

want to insert data in table in reactjs

1 Answer 1

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related