Есть массив постов разбитых функцией map

Рейтинг: 0Ответов: 1Опубликовано: 23.07.2023

Есть массив песен разбитых функцией map. При клике на определенную песню переходит на страницу этой песни и должно выводить информацию о песне. Используется хук useParams чтобы переходить по id песни. Так вот, как в компоненте страницы песни выводит информацию о песне, как достать их из массива, id которого равен id страницы песни?

Компонент страницы:

import { useParams } from "react-router-dom";

const SongPage = (props) => {

    const params = useParams();
    const pageId = params.id;

    const song = props.songs.find(function (item) {
        return item.title === 'Empire';
    });
    
    return ( 
        <div className="song-page">
            {pageId}
            {console.log(song)}
        </div>
     );
}
 
export { SongPage };

Сам массив: 

const [songs, setSongs] = useState([
    {
      id: 1,
      song: 'Empire',
      band: 'Bring Me The Horizon',
      album: 'Bring Me The Horizon',
      duration: '5:15',
      genre: 'metalcore',
      img: 'bringMeTheHorizon.jpg'
    },

    {
      id: 2,
      song: 'Empire',
      band: 'Bring Me The Horizon',
      album: 'Bring Me The Horizon',
      duration: '5:15',
      genre: 'metalcore',
      img: 'bringMeTheHorizon.jpg'
    },

    {
      id: 3,
      song: 'Empire',
      band: 'Bring Me The Horizon',
      album: 'Bring Me The Horizon',
      duration: '5:15',
      genre: 'metalcore',
      img: 'bringMeTheHorizon.jpg'
    },

    {
      id: 4,
      song: 'Hospital For Souls',
      band: 'Bring Me The Horizon',
      album: 'Bring Me The Horizon',
      duration: '5:15',
      genre: 'metalcore',
      img: 'bringMeTheHorizon.jpg'
    },

    {
      id: 5,
      song: 'Hospital For Souls',
      band: 'Bring Me The Horizon',
      album: 'Bring Me The Horizon',
      duration: '5:15',
      genre: 'metalcore',
      img: 'bringMeTheHorizon.jpg'
    },

    {
      id: 6,
      song: 'Hospital For Souls',
      band: 'Bring Me The Horizon',
      album: 'Bring Me The Horizon',
      duration: '5:15',
      genre: 'metalcore',
      img: 'bringMeTheHorizon.jpg'
    },
  ]);

Какую функцию можно использовать для этого? Пробовал find но не смог реализовать, я новичок так что заранее извините за непонятки)

javascript reactjs
Источник: Stack Overflow на русском

Ответы

▲ -1
import { useParams } from "react-router-dom";

export const SongPage = (props) => {

    const params = useParams();
    const pageId = params.id;

    const song = props.songs.find(function (item) {
        return item.id === pageId;
    });
    
    return ( 
        <div className="song-page">
            <img src=`${song.img}` />
            <div>{song.song}</div>
            <div>{song.band}</div>
            <div>{song.album}</div>
            <div>{song.duration}</div>
            <div>{song.genre}</div>
        </div>
     );
}

Находим элемент в массиве по айдишнику. Вытаскиваем из него необходимые поля внутри JSX.

Как-то так.