Estaba tratando de representar un componente basado en el clic desplegable.
Aquí está mi código
const App = () => { const [showPlayer, setShowPlayer] = useState(); const switchVisibleDiv = ({divNumber}) => { setShowPlayer({showPlayer: divNumber}) } return( <> <DropdownButton id="dropdown-basic-button" title="Dropdown Menu"> {data.map((info, index) => ( <Dropdown.Item key={index} onClick={() => switchVisibleDiv(index)}>Title - {data.title}</Dropdown.Item> ))} </DropdownButton> {data.map((video, index) => ( (showPlayer === index ? <Plyr key={index} options={options} source={{ type: 'video', title: 'Example title', sources: [ { `${video.video_url}`, type: 'video/mp4', size: 1080, } ] }} /> : null) ))} </> ) }Pero parece que no funciona. Tomé la referencia de una respuesta de aquí que era un componente de clase e intenté convertirlo en un componente de función.
Debe cambiar esta función de callback de llamada para el componente DropdownButton .
const switchVisibleDiv = (divNumber) => { setShowPlayer(divNumber) } Funcionará entonces, el enfoque original es el formato Class Component y en Functional Component , no lo usamos así, simplemente pase el divNumber como un parámetro para la función setter setShowPlayer .
Entonces funcionará.
Necesita establecer un número y no un objeto:
const switchVisibleDiv = (divNumber) => { setShowPlayer(divNumber}) }Una cosa más que podría haber hecho es eliminar la función y simplemente establecer el estado desde aquí:
<DropdownButton id="dropdown-basic-button" title="Dropdown Menu"> {data.map((info, index) => ( <Dropdown.Item key={index} onClick={() => setShowPlayer(index)}>Title - {data.title}</Dropdown.Item> ))} </DropdownButton> PD: use otra cosa en lugar de index como key . No se recomienda.