CODEWITHSUNDEEP
reactjs
ahmad bilal
ahmad bilal

Reputation: 141

want to insert data in table in reactjs

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 ?

Upvotes: 0

Views: 1331

Answers (1)

Yossi
Yossi

Reputation: 6027

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 ]
  }));

}

Upvotes: 1

Related Questions