CODEWITHSUNDEEP
javascriptasp.netreactjsweb
Patricia Mari Maclang
Patricia Mari Maclang

Reputation: 61

how can i pass data on the handleronclick reactjs

this part of the code shows that the button read the id of the clicked row how can i put that data inside the input type 

 handleOnclick(id) {

}

renderItem(d, i) {


    return <tr key={i} >

  <td> {d.Employee_ID} </td>
        <td>{d.Employee_Name}</td>
        <td>{d.Address }</td> 
        <td><center><button className ="btn btn-info" onClick={this.handleOnclick.bind(this, d.Employee_ID)}   data-toggle="modal" data-target="#UpdateEmployee">Edit</button></center></td>
  <td><center><button className ="btn btn-danger">Delete</button></center></td>

 </tr>
}

Upvotes: 2

Views: 66

Answers (1)

thinhvo0108
thinhvo0108

Reputation: 2232

You may try something like this:

constructor(props){
  super(props);
  // ...
  this.state = {
    Employee_Name: '',
  }
}


handleOnclick(id, name) {
  this.setState({
    Employee_Name: name,
  });
}

Somewhere in your render() method (where the text-box is rendered, perhaps not in the renderItem(). and we don't need onChange function here, because the value of the text-box will be changed automatically when we setState):

render() {
  return (
    <input type="text" value={this.state.Employee_Name} />
  );
}

Modify a bit in the renderItem(), to pass the Employee_Name to the handleOnclick()

renderItem(d, i) {


    return <tr key={i} >

  <td> {d.Employee_ID} </td>
        <td>{d.Employee_Name}</td>
        <td>{d.Address }</td> 
        <td><center><button className ="btn btn-info" onClick={this.handleOnclick.bind(this, d.Employee_ID, d.Employee_Name)}   data-toggle="modal" data-target="#UpdateEmployee">Edit</button></center></td>
  <td><center><button className ="btn btn-danger">Delete</button></center></td>

 </tr>
}

Please also post here more code if this doesn't work yet, thanks!

Upvotes: 1

Related Questions