CODEWITHSUNDEEP
javascriptreactjsnext.jsethereum
MJeremy
MJeremy

Reputation: 1250

Warning: Encountered two children with the same key, `-`. Keys should be unique so that components maintain their identity across updates

I am running a code snippet as follow:

renderPropositions() {
        const items = this.props.propositionAddress.map(async address => {
            // get the instance of deployed contract
            const instance = new web3.eth.Contract(JSON.parse(Proposition.interface), address);

            const title = await instance.methods.pTitle().call();

            return {
                header: title,
                meta: address
            }
        });

        return <Card.Group items={items} />;

    }

This continually hit the error above. But when I drop the async and await functions, there is no error.

Could anyone help?

Upvotes: 0

Views: 364

Answers (1)

taubi19
taubi19

Reputation: 382

You get the warning because your items haven't got a key defined, which is used internally by react for reconciliation. This is the way react updates only the parts of the DOM that actually changed. You should read on this two topics, using keys and reconciliation.

You should show the code where you actually render the items (in Card.Group?), if you want a more detailed answer on how to remove the warning.

Upvotes: 0

Related Questions