CODEWITHSUNDEEP
reactjskey
Paul A
Paul A

Reputation: 417

I have assigned a unique key prop bu keep getting the error

I keep getting the error below despite trying to set a unique key

index.js:1 Warning: Each child in a list should have a unique "key" prop....

DETAILS I have a component that is rendering and am passing an key={id} to the child component the id is unique and will render through another prop but I keep getting an error. I think I'm doing something stupid but cannot figure it out

PARENT COMPONENT

import React, { Fragment } from 'react';
import ReactDOM from 'react-dom';
import Card from './card';


const CardsBlock = props => {
  const cardRender = props.Cards.map(Cards => {
    const { title, url, id } = Cards;
    return (
      <Fragment>
        <Card  key={id} id={id} title={title} url={url} />
      </Fragment>
    );
  });
  return (
    <div
      id='card-block'
      className='blue  container-thin cardblock  '>
      <h2>FACTS</h2>
      {cardRender}
    </div>
  );
};

export default CardsBlock;

CHILD COMPONENT

import React from 'react';
import ReactDOM from 'react-dom';
import 'materialize-css';

const Card = props => {
  //deconstruct props here
  const { title, url, id } = props
  return (
    <div id={"card-"+id} className='blue lighten-3 card container-thin   lighten-4'>
      <div className='card-left'>
        <i class='material-icons grey-text'>more_vert</i>
      </div>
      <div class='card-middle'>
        <a href='http://www.jimmyyukka.com'>
          <p>{title} </p>
        </a>
      </div>
      <div className='card-right'>
        <span>
          <i class='material-icons grey-text'>mode_edit</i>
        </span>
        <span>
          <i class='material-icons grey-text'>clear</i>
        </span>
      </div>
    </div>
  );
};

export default Card;

Upvotes: 0

Views: 86

Answers (2)

Ankesh Ramani
Ankesh Ramani

Reputation: 21

import React, { Fragment } from 'react';
import ReactDOM from 'react-dom';
import Card from './card';


const CardsBlock = props => {
  const cardRender = props.Cards.map(record=> {
    const { title, url, id } = Cards;
    return (
      <Fragment>
        <Card  key={record.id} id={record.id} title={record.title} url={record.url} />
      </Fragment>
    );
  });
  return (
    <div
      id='card-block'
      className='blue  container-thin cardblock  '>
      <h2>FACTS</h2>
      {cardRender}
    </div>
  );
};

export default CardsBlock;

Upvotes: 0

akhtarvahid
akhtarvahid

Reputation: 9779

1.Don't need to define fragment if you are passing value to child component.

2.You can use destructuring as used or pass object and destructure inside child component.

Define like this using destructuring,

const CardsBlock = props => {
  const cardRender = props.Cards.map(({title,url,id})=> 
        <Card  key={id} id={id} title={title} url={url} />
  );
  return (
    <div
      id='card-block'
      className='blue  container-thin cardblock  '>
      <h2>FACTS</h2>
      {cardRender}
    </div>
  );
};

Upvotes: 1

Related Questions