Styjun

Why did Khan ask Admiral James T. Kirk about Project Genesis?

Where can/should I, as a high schooler, publish a paper regarding the derivation of a formula?

Is MOSFET active device?

Do Bayesian credible intervals treat the estimated parameter as a random variable?

Sum ergo cogito?

Why doesn't 'd /= d' throw a division by zero exception?

Did anyone try to find the little box that held Professor Moriarty and his wife after the crash?

Is there any way to keep a player from killing an NPC?

Compelling story with the world as a villain

I don't have the theoretical background in my PhD topic. I can't justify getting the degree

How much does Commander Data weigh?

Why is there a difference between predicting on Validation set and Test set?

Add newline to prompt if it's too long

How do proponents of Sola Scriptura address the ministry of those Apostles who authored no parts of Scripture?

Very slow boot time and poor perfomance

How do I get toddlers to stop asking for food every hour?

Is "The life is beautiful" incorrect or just very non-idiomatic?

What would make bones be of different colors?

Do they have Supervillain(s)?

How can I unambiguously ask for a new user's "Display Name"?

Was the Boeing 2707 design flawed?

Does Norwegian overbook flights?

What is the difference between "Grippe" and "Männergrippe"?

Network helper class with retry logic on failure

How can i fix my onChangeHandler function to add multiple records at a time?

How to create a DataTable in C# and how to add rows?Best practice for ReactJS form componentsHow to combine multiple inline style objects?How to conditionally add attributes to React components?Is it OK to use React.render() multiple times in the DOM?What do multiple arrow functions mean in javascript?Cannot update during an existing state transitionHow to add multiple classes to a ReactJS ComponentHow does react handle multiple props from one form?KeyPress to detect 'Enter' blocks any data entry on an Input text field

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

I have a table for the user and I want to add multiple users to that table by click on my "Add" button. I am not able to understand how should my onChangeHandler and onSubmit function looks like!!

As far as my understanding concerns, it will be only done by passing an id/index to the functions. I tried that but i am doing something wrong in it

class Component extends React.Component 
 constructor(props) 
 super(props);

 this.state = 
 id: '',
 lastname: '',
 firstname: '',
 email: ''
 ;

 this.state.displayRow = [
 
 name: ''
 
 ];
 this.handleChange = this.handleChange.bind(this);
 this.insertRow = this.insertRow.bind(this);
 
 handleChange(e) 
 console.log(e.target.value);
 this.setState( [e.target.name]: e.target.value );
 

 insertRow(user) 
 var id = (+new Date() + Math.floor(Math.random() * 999999)).toString(36);

 this.setState(
 displayRow: [
 ...this.state.displayRow,
 
 id: id,
 nuid: '',
 lastname: '',
 firstname: '',
 email: ''
 
 ]
 );
 
 render() 
 return (
 <Table responsive className="table_main">
 <thead>
 <tr className="user-table-row">
 <th>ID</th>
 <th>Last Name</th>
 <th>First Name</th>
 </tr>
 </thead>
 <tbody>
 <tr id="table">
 <td key=idx>
 <input
 key=idx
 type="text"
 id="id"
 name="id"
 value=item.id
 onChange=this.handleChange(idx)
 />
 </td>

 <td>
 <input
 key=idx
 type="text"
 id="lastname"
 name="lastname"
 value=item.lastname
 onChange=this.handleChange
 />
 </td>

 <td>
 <input
 key=idx
 type="text"
 id="firstname"
 name="firstname"
 value=item.firstname
 onChange=this.handleChange
 />
 </td>
 </tr>
 <td>
 <Button
 className="additional-add-btn"
 style=style
 variant="contained"
 onClick=() => 
 this.insertRow();
 
 >
 + Additional User
 </Button>
 </td>
 </tbody>
 </Table>
 );
 

reactjs datatable eventhandler

share|improve this question

edited Mar 27 at 18:48

Purvish Oza

asked Mar 27 at 18:28

Purvish OzaPurvish Oza

1088 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  The code you posted was very hard to read with multiple formatting errors, I think the edit is correct but please make it easy for strangers to follow your code :)
  
  – Phix
  Mar 27 at 18:38
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  followed the editing pattern. I guess it looks good now!
  
  – Purvish Oza
  Mar 27 at 18:40
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  should it be arrow function insertRow = (user) => { ?
  
  – Alexandr Zavalii
  Mar 27 at 18:45
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I am binding it inside the constructor .
  
  – Purvish Oza
  Mar 27 at 18:48
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @PurvishOza oh sorry didnt see that. Where do you use your state displayRow ?
  
  – Alexandr Zavalii
  Mar 27 at 19:40
  

  
  
  
  

 | 
show 2 more comments

0

I have a table for the user and I want to add multiple users to that table by click on my "Add" button. I am not able to understand how should my onChangeHandler and onSubmit function looks like!!

As far as my understanding concerns, it will be only done by passing an id/index to the functions. I tried that but i am doing something wrong in it

class Component extends React.Component 
 constructor(props) 
 super(props);

 this.state = 
 id: '',
 lastname: '',
 firstname: '',
 email: ''
 ;

 this.state.displayRow = [
 
 name: ''
 
 ];
 this.handleChange = this.handleChange.bind(this);
 this.insertRow = this.insertRow.bind(this);
 
 handleChange(e) 
 console.log(e.target.value);
 this.setState( [e.target.name]: e.target.value );
 

 insertRow(user) 
 var id = (+new Date() + Math.floor(Math.random() * 999999)).toString(36);

 this.setState(
 displayRow: [
 ...this.state.displayRow,
 
 id: id,
 nuid: '',
 lastname: '',
 firstname: '',
 email: ''
 
 ]
 );
 
 render() 
 return (
 <Table responsive className="table_main">
 <thead>
 <tr className="user-table-row">
 <th>ID</th>
 <th>Last Name</th>
 <th>First Name</th>
 </tr>
 </thead>
 <tbody>
 <tr id="table">
 <td key=idx>
 <input
 key=idx
 type="text"
 id="id"
 name="id"
 value=item.id
 onChange=this.handleChange(idx)
 />
 </td>

 <td>
 <input
 key=idx
 type="text"
 id="lastname"
 name="lastname"
 value=item.lastname
 onChange=this.handleChange
 />
 </td>

 <td>
 <input
 key=idx
 type="text"
 id="firstname"
 name="firstname"
 value=item.firstname
 onChange=this.handleChange
 />
 </td>
 </tr>
 <td>
 <Button
 className="additional-add-btn"
 style=style
 variant="contained"
 onClick=() => 
 this.insertRow();
 
 >
 + Additional User
 </Button>
 </td>
 </tbody>
 </Table>
 );
 

reactjs datatable eventhandler

share|improve this question

edited Mar 27 at 18:48

Purvish Oza

asked Mar 27 at 18:28

Purvish OzaPurvish Oza

1088 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  The code you posted was very hard to read with multiple formatting errors, I think the edit is correct but please make it easy for strangers to follow your code :)
  
  – Phix
  Mar 27 at 18:38
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  followed the editing pattern. I guess it looks good now!
  
  – Purvish Oza
  Mar 27 at 18:40
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  should it be arrow function insertRow = (user) => { ?
  
  – Alexandr Zavalii
  Mar 27 at 18:45
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I am binding it inside the constructor .
  
  – Purvish Oza
  Mar 27 at 18:48
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @PurvishOza oh sorry didnt see that. Where do you use your state displayRow ?
  
  – Alexandr Zavalii
  Mar 27 at 19:40
  

  
  
  
  

 | 
show 2 more comments

I have a table for the user and I want to add multiple users to that table by click on my "Add" button. I am not able to understand how should my onChangeHandler and onSubmit function looks like!!

As far as my understanding concerns, it will be only done by passing an id/index to the functions. I tried that but i am doing something wrong in it

class Component extends React.Component 
 constructor(props) 
 super(props);

 this.state = 
 id: '',
 lastname: '',
 firstname: '',
 email: ''
 ;

 this.state.displayRow = [
 
 name: ''
 
 ];
 this.handleChange = this.handleChange.bind(this);
 this.insertRow = this.insertRow.bind(this);
 
 handleChange(e) 
 console.log(e.target.value);
 this.setState( [e.target.name]: e.target.value );
 

 insertRow(user) 
 var id = (+new Date() + Math.floor(Math.random() * 999999)).toString(36);

 this.setState(
 displayRow: [
 ...this.state.displayRow,
 
 id: id,
 nuid: '',
 lastname: '',
 firstname: '',
 email: ''
 
 ]
 );
 
 render() 
 return (
 <Table responsive className="table_main">
 <thead>
 <tr className="user-table-row">
 <th>ID</th>
 <th>Last Name</th>
 <th>First Name</th>
 </tr>
 </thead>
 <tbody>
 <tr id="table">
 <td key=idx>
 <input
 key=idx
 type="text"
 id="id"
 name="id"
 value=item.id
 onChange=this.handleChange(idx)
 />
 </td>

 <td>
 <input
 key=idx
 type="text"
 id="lastname"
 name="lastname"
 value=item.lastname
 onChange=this.handleChange
 />
 </td>

 <td>
 <input
 key=idx
 type="text"
 id="firstname"
 name="firstname"
 value=item.firstname
 onChange=this.handleChange
 />
 </td>
 </tr>
 <td>
 <Button
 className="additional-add-btn"
 style=style
 variant="contained"
 onClick=() => 
 this.insertRow();
 
 >
 + Additional User
 </Button>
 </td>
 </tbody>
 </Table>
 );
 

reactjs datatable eventhandler

share|improve this question

edited Mar 27 at 18:48

Purvish Oza

asked Mar 27 at 18:28

Purvish OzaPurvish Oza

1088 bronze badges

class Component extends React.Component 
 constructor(props) 
 super(props);

 this.state = 
 id: '',
 lastname: '',
 firstname: '',
 email: ''
 ;

 this.state.displayRow = [
 
 name: ''
 
 ];
 this.handleChange = this.handleChange.bind(this);
 this.insertRow = this.insertRow.bind(this);
 
 handleChange(e) 
 console.log(e.target.value);
 this.setState( [e.target.name]: e.target.value );
 

 insertRow(user) 
 var id = (+new Date() + Math.floor(Math.random() * 999999)).toString(36);

 this.setState(
 displayRow: [
 ...this.state.displayRow,
 
 id: id,
 nuid: '',
 lastname: '',
 firstname: '',
 email: ''
 
 ]
 );
 
 render() 
 return (
 <Table responsive className="table_main">
 <thead>
 <tr className="user-table-row">
 <th>ID</th>
 <th>Last Name</th>
 <th>First Name</th>
 </tr>
 </thead>
 <tbody>
 <tr id="table">
 <td key=idx>
 <input
 key=idx
 type="text"
 id="id"
 name="id"
 value=item.id
 onChange=this.handleChange(idx)
 />
 </td>

 <td>
 <input
 key=idx
 type="text"
 id="lastname"
 name="lastname"
 value=item.lastname
 onChange=this.handleChange
 />
 </td>

 <td>
 <input
 key=idx
 type="text"
 id="firstname"
 name="firstname"
 value=item.firstname
 onChange=this.handleChange
 />
 </td>
 </tr>
 <td>
 <Button
 className="additional-add-btn"
 style=style
 variant="contained"
 onClick=() => 
 this.insertRow();
 
 >
 + Additional User
 </Button>
 </td>
 </tbody>
 </Table>
 );
 

share|improve this question

edited Mar 27 at 18:48

Purvish Oza

asked Mar 27 at 18:28

Purvish OzaPurvish Oza

1088 bronze badges

share|improve this question

edited Mar 27 at 18:48

Purvish Oza

asked Mar 27 at 18:28

Purvish OzaPurvish Oza

1088 bronze badges

asked Mar 27 at 18:28

Purvish OzaPurvish Oza

1088 bronze badges

asked Mar 27 at 18:28

Purvish OzaPurvish Oza

1088 bronze badges