Home / Questions / 480681
Accepted
Pablo Grassi
Asked: 2022-09-02 12:29:25 +0800 CST 2022-09-02 12:29:25 +0800 CST

Warning: Each child in a list should have a unique "key" prop

  • 772

I have a problem in a part of the code where I get the error Warning: Each child in a list should have a unique "key" prop. , I have added the key property but having an if inside the map gives me that warning. If I delete the if and try leaving one of the components the error is not shown but if I do the if it is shown.

return(
       
            <div className="main">
                {video.map(vid => (
                    <>
                    { vid.video !== '' ? (  
                         <VideoPlayer id={vid.id} video={vid.video} name={vid.name} poster={vid.poster} key={vid.id}  />
                    ) : (
                        <ImgNoVideo id={vid.id} url={vid.url} name={vid.name} poster={vid.poster} key={vid.id} />
                    )}
                    </>
                ))}
            </div>
    );
reactjs

1 Answers

  1. Best Answer

    The full version of the component can be used Fragment, this component accepts the property keyif used in this way.

    Shorthand version of Fragment:

    <>Some JSX</>

    Full version of Fragment:

    <Fragment key={id}>Some JSX</Fragment>

    demonstration:

    const video = [
  {
    id:0,
    video:"video va",
    name:"name value 0",
    url:"url va",
    poster:"poster va"
  },
  {
    id:1,
    video:"video va 1",
    name:"name value 1",
    url:"url va 1",
    poster:"poster va 1"
  },
  {
    id:2,
    video:"video va 2",
    name:"name value 2",
    url:"url va 2",
    poster:"poster va 2"
  }
]

function App(){
  return (
    <div className="main">
    {video.map(vid => (
        <React.Fragment key={vid.id}>
        { vid.video !== '' ? (  
            <VideoPlayer id={vid.id} video={vid.video} name={vid.name} poster={vid.poster} />
        ) : (
            <ImgNoVideo id={vid.id} url={vid.url} name={vid.name} poster={vid.poster} />
        )}
        </React.Fragment>
    ))}
  </div>
  )
}

function VideoPlayer(props){
  return (
    <p>{props.name}</p>
  )
}

function ImgNoVideo(props){
  return (
    <p>{props.name}</p>
  )
}

ReactDOM.render(<App/>, document.getElementById('root'))
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>

<div id="root"></div>

    Hope this answer is helpful.

    • 1