Reactjs - array/iterator key

Question

I've got the following error:

warning.js?0260:45Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of Tabs.

  render() {

    const { tabs } = this.props;
    const { active } = this.state;
    return (
      <div>
        <ButtonToolbar>
          {tabs.map(listValue =>
            <Button  onClick={() => this.handleClick(listValue)}>
              {listValue}
            </Button>
          )}
        </ButtonToolbar>

        // Display the chosen tab
        {this.showTab(active)}



      </div>
    );

Where would I add the id property in this case. I've tried:

<ButtonToolbar>
              {tabs.map(listValue =>
                <Button key={listValue.id}  onClick={() => this.handleClick(listValue)}>
                  {listValue}
                </Button>
              )}
            </ButtonToolbar>

But it does not get rid of the error. Please advise

You could also do tabs.map((listValue, index) => <Button key={listValue.id + index} onClick={() => this.handleClick(listValue)}> {listValue} </Button> )} — finalfreq
– finalfreq, Commented Sep 30, 2016 at 23:09

Mario Tacke · Accepted Answer · 2016-09-30 23:09:30Z

2

You can use map's iterator for this:

<ButtonToolbar>
  {tabs.map((listValue, key) =>
    <Button              ^--- here
      key={key}   <--- and here.
      onClick={() => this.handleClick(listValue)}
    >
      {listValue}
    </Button>)
  }
</ButtonToolbar>

Reference

Array.prototype.map()

answered Sep 30, 2016 at 23:09

Mario Tacke

5,5073 gold badges34 silver badges51 bronze badges

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

Collectives™ on Stack Overflow

Reactjs - array/iterator key

1 Answer 1

Reference

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Reference

Comments

Your Answer

Sign up or log in

Post as a guest

Related