Как случайным образом отобразить массив объектов с помощью React

Я новичок в React, и у меня возникают проблемы при попытке визуализации объекта из массива через его идентификатор. Я имею в виду, я пытаюсь сгенерировать случайное число и сравнить это число с идентификатором объекта из массива и отобразить его полный пакет элементов.

Это мой App.js:

import React, {Component} from 'react'
import './App.css'
import RandomAlbums from './RandomAlbums'


class App extends Component {
  render(){
    const albums = [
      {id: 1, cover: './Covers/Disintegration.jpg', band: "The Cure", title: "Disintegration"},
      {id: 2, cover: './Covers/In_A_Silent_way.jpg', band: "Miles Davis", title: "In a Silent Way"},
      {id: 3, cover: './Covers/In_Rainbows.jpg', band: "Radiohead", title: "In Rainbows"},
      {id: 4, cover: './Covers/Laughing_Stock.jpg', band: "Talk Talk", title: "Talk Talk"},
      {id: 5, cover: './Covers/The_Mantle.jpg', band: "Agalloch", title: "Tha Mantle"}
  ]

    return (
      <div className="App">
        <RandomAlbums albums={albums} />
      </div>
    );
  }
}

export default App;

И это мой (не полный) RandomAlbum.js:

import React, {Component} from 'react'

class RandomAlbums extends Component {
    constructor(props) {
        super(props);
        this.state = {
            id: '',
            cover: '',
            band: '',
            title: ''
        };
    }


    getAlbum(albums){
      var random = Math.floor(Math.random() * 5);
      this.setState({id:random})
    }

  render(){
    return (
      <div>
        <button onClick={this.getAlbum}>Shuffle</button>
      </div>
    );
  }
}

export default RandomAlbums;

Я просто хочу визуализировать кнопку воспроизведения в случайном порядке, когда на клике я получаю случайное покрытие с названием группы и альбома.

Заранее спасибо.

Всего 1 ответ


Вы можете выбрать случайный альбом из переменной album, которую вы передаете в реквизитах:

class RandomAlbums extends Component {
    constructor(props) {
        super(props);
        this.state = {
            id: '',
            cover: '',
            band: '',
            title: ''
        };
    }


    getAlbum(){
      var random = Math.floor(Math.random() * 5);
      this.setState({...this.props.albums[random]})
    }

  render(){
    return (
      <div>
        <button onClick={this.getAlbum}>Shuffle</button>
      </div>
    );
  }
}

export default RandomAlbums;

Есть идеи?

10000