Slider y API con react

[natalypc27]

Hola a todos,

Estoy trabajando con un slide en react, pero cuando doy clic para pasar a otra imagen quiero tomar sus datos pero consumiendo una api para guardarlo en un array y que al pasar a la siguiente el array se limpie y tome nuevos datos, y quería saber si el componentDidUpdate() u otro del ciclo de vida de react me permitirá esa parte del proceso.

[merunga]

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!

[natalypc27]

Gracias Mariano, si me funciono mucho la validación, pero tengo una duda antes de validarlo tengo que guardar todas las canciones en un array, pero se puede limpiar el array y por cada imagen que pase se actualize consumiendo los datos del api