6

Tengo un problema en una parte del código donde me tira el error Warning: Each child in a list should have a unique "key" prop., Tengo agregada la propiedad key pero al tener un if dentro del map me arroja ese warning. Si borro el if y pruebo dejando uno de los componentes no se muestra el error pero si hago el if se muestra.

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>
    );
1
  • Yo intentaría con retornar los componentes hijos. Lo que haría es lo siguiente: return <VideoPlayer id={vid.id} video={vid.video} name={vid.name} poster={vid.poster} key={vid.id} />. Y, return <ImgNoVideo id={vid.id} url={vid.url} name={vid.name} poster={vid.poster} key={vid.id} />
    – Emanuek
    Commented el 2 sept. 2021 a las 0:51

1 respuesta 1

2

Se puede usar la versión completa del componente Fragment, este componente acepta la propiedad key si se usa de esta forma.

Versión shorthand de Fragment:

<>Some JSX</>

Versión completa de Fragment:

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

Demo:

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>

Espero que esta respuesta sea de ayuda.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.