Skip to main content
se añadió 1 carácter en el cuerpo
Origen Enlace
g.4
  • 3.5k
  • 2
  • 11
  • 22

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

Version shothandVersió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.

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

Version shothand 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.

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.

Origen Enlace
g.4
  • 3.5k
  • 2
  • 11
  • 22

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

Version shothand 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.