Hola @natalypc27
Por como expones la solucion, creo q estas pensando en html
, no estas pensando en react
.
Te recomendaria modelar tu state de la siguiente manera.
state = {
canciones: [
{ _id: 'cancion-1', artist: 'artista 1', title: 'titulo cancion 1' },
{ _id: 'cancion-2', artist: 'artista 2', title: 'titulo cancion 2' },
{ _id: 'cancion-3', artist: 'artista 3', title: 'titulo cancion 3' },
{ _id: 'cancion-4', artist: 'artista 4', title: 'titulo cancion 4' },
],
cancionActualId: 'cancion-1',
};
Entonces cuando tu lista se esta por montar, llamas a la api y te traes un batch de canciones, digamos 30. Ese array de resultado lo colocas en canciones
, y estableces q por defecto cancionActualId
es el id
de la primera cancion de canciones
.
Luego desde tu lista, para mostrar el detalle de la cancion, lo q haces es combinar la informacion de canciones
y cancionActualId
para obtener la autentica cancion actual
<DetalleCancion
cancion={this.state.canciones.find(c => c._id === this.state.cancionActualId)}
/>
Y luego para ir hacia detras y adelante, lo unico q haces es actualizar cancionActualId
segun corresponda con el id de la proxima/anterior cancion del array. El detalle se actualizara magicamente
No cuentas como te va
Saludos!