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.