CODEWITHSUNDEEP
reactjssemantic-uisoliditynext.js
B3th4
B3th4

Reputation: 113

Encountered two children with the same key in React

I'm currently trying to learn how to create a webapp to interact with an Ethereum contract I wrote. Therefore I have chosen to learn how use React and Semantic-UI.

The page I am working on is not working as I would expected. It does not show the CardGroup because of an error that I do not understand:

warning.js?040ca1d:33 Warning: Encountered two children with the same key, `-`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
    in div (created by CardGroup)
    in CardGroup (at index.js?entry:30)
    in div (at index.js?entry:37)
    in div (at Layout.js:5)
    in Unknown (at index.js?entry:36)
    in BiddingCreator (created by Container)
    in AppContainer (created by Container)
    in Container (created by App)
    in div (created by App)
    in App

Here is my current code:

import React, {Component} from 'react';
import biddingCreator from '../Ethereum/BiddingCreator';
import {Card} from 'semantic-ui-react';
import Layout from '../components/Layout'

const compiledBidding = require('../Ethereum/build/Bidding.json');

class BiddingCreator extends Component{

  static async getInitialProps(){
    const biddings = await biddingCreator.methods.getBiddings().call();

    const items = await biddings.map( async address => {
      var summary = await biddingCreator.methods.viewBidding(address).call();
      console.log(summary);
      console.log(address);
      return {
        header: address,
        description: summary[1],
        meta: address,
        fluid: true
      };

    });

    return { biddings, items};
  }

 renderBiddings(){
    console.log(this.props.items);
    return <Card.Group items={this.props.items} />;
}

  render(){

    return(
      <Layout>
       <div>

    {this.renderBiddings()}
    </div>
    </Layout>
  )
  }
}

export default BiddingCreator;

Can someone please explain me what I am doing wrong and what this error means?

Upvotes: 0

Views: 11021

Answers (2)

B3th4
B3th4

Reputation: 113

Here is the solution I found using the help in yuyokk's post:

items was still waiting on its promises when my cars where trying to render and therefore thy had no data and thus no key.

with this code it works now:

const items =await Promise.all( biddings.map(async address => {

      var summary = await biddingCreator.methods.viewBidding(address).call();
      return {
        header: summary[0],
        description: summary[1],
        meta: address,
        fluid: true
      };
    }));

Upvotes: 0

iurii
iurii

Reputation: 4230

It's a common error for React lists and keys

I've checked semantic-ui-react source code for Card.Group and it seems that you can add a key attribute to each item e.g.

const items = this.props.biddings.map(async (address, index) => {
  var summary = await biddingCreator.methods.viewBidding(address);
  return {
    key: index,
    header: summary[0],
    description: summary[1],
    meta: address,
    fluid: true
  };
});

PS

Here is how Card.Group generates keys const key = item.key || [item.header, item.description].join('-')

and it seems in some cases you have empty values for header and description that's why you face the error "Encountered two children with the same key, -"

Upvotes: 4

Related Questions