Using 'keys' in React to render an array of input box/ button

Question

I have a table(array of objects) in React. I have a input box/ button for each row. Currently, I m using index in react local state (for input box/button). But 'index' results in messed up table, when filtered. Read link https://www.menubar.io/react-keys-index/ and trying to use 'keys'. Can someone help for accessing the array of input boxes and buttons using keys? My code is below:

 companies.map((company,index)=>{
 return (
 <tr key={company.id}>
   <td onClick={this.props.onClick.bind(this, company)}></td>       
   <td>{company.vacancy}</td>     
   <td key={company.id}>            
         <p><input type="text" value={this.state.company.messages[index] || ''} name={this.state.company.messages[index]} onChange={this.handleMessageChange.bind(this,company,index)}/></p>
         <p><button type="button" onClick={() => this.sendSMS(company,index)}>SMS</button></p>
  </td>                          
 </tr>
   );
  })

I have companyId as unique value.

Use company.id instead. For more info about the behavior you are getting, read the linked post below. — Chris
– Chris, Commented Jan 15, 2018 at 8:38
Possible duplicate of Understanding unique keys for array children in React.js — Chris
– Chris, Commented Jan 15, 2018 at 8:38
@Chris Yes but I m not sure how to access/ use 'keys' in an array of input boxes? Any link or example ? — user8125765
– user8125765, Commented Jan 15, 2018 at 8:39

crazyCoder · Accepted Answer · 2018-01-15 09:25:13Z

2

Since companyId is unique,it can be used as key.

In your example key should be used in tr and not in the inner td

<tr key={company.id}> - correct usage
<td key={company.id}> - Incorrect usage

Keys only make sense in the context of the surrounding array.

You can refer the Extracting Components with Keys in https://reactjs.org/docs/lists-and-keys.html which Incorrect and correct Key Usage

You can refer Understanding unique keys for array children in React.js for any operations in the array (filter in your case).

edited Jan 15, 2018 at 9:25

answered Jan 15, 2018 at 8:58

crazyCoder

3471 gold badge3 silver badges16 bronze badges

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

1 Comment

Chris Over a year ago

This is correct, but doesn't answer OP's issue. Take a look in the comments.

Chris · Accepted Answer · 2018-01-15 09:03:02Z

You shouldn't use arrays to store the values of items that can rearrange because then you would also have to rearrange the array in order to maintain the correct item-to-value relation.

Use an object instead:

<input 
  type="text"
  value={this.state.company.messages[company.id] || ''}
  name={this.state.company.messages[company.id]}
  onChange={this.handleMessageChange.bind(this, company)}
/>

Your state in the constructor would then look something like:

this.state = {
  company: {
    messages: {}
  }
};

This way, your messages per company are stored as:

company: {
 messages: {
   someCompanyId: "blah blah",
   anotherCompanyId: "blah",
   ...
 }
}

This makes the storing of the values independent of index and order.

Collectives™ on Stack Overflow

Using 'keys' in React to render an array of input box/ button

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related