Как добавить текст в элемент списка?

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

Обзор проекта:

Как было сказано ранее, это проект музыкального проигрывателя, созданный с помощью create-react-app. Цель состоит в том, чтобы щелкнуть изображение песни по вашему выбору, и песня будет воспроизведена для вас.

Эта проблема:

На данный момент кликабельные изображения перечислены в левой части страницы музыкального проигрывателя, что, в свою очередь, оставляет большую часть страницы пустой. Это пространство по-прежнему является компонентом списка, идея состоит в том, чтобы заполнить его названием песни, которой оно соответствует. Однако я понятия не имею, как это сделать. Как я могу добавить их соответствующие названия в список?

Код

Turkish.js (файл музыкального проигрывателя):

import React, { Component,useRef, setStatus, status } from 'react';
import './Turkish.css';
import turk1 from "./music/turk1.mp3";
import turk2 from "./music/turk2.mp3"
import turk3 from "./music/turk3.mp3"
import turk4 from "./music/turk4.mp3"
export default function Turkish() {
const data = [
{ imgSrc: 'turk1.png', audioSrc: turk1},
{ imgSrc: 'turk2.png', audioSrc: turk3 },
{ imgSrc: 'turk3.png', audioSrc: turk4 },
{ imgSrc: 'turk4.png', audioSrc: turk2 },
];
return (
<div className='Turkish'>
<ol>

{data.map(({ imgSrc, audioSrc }) => (
<MediaComponent imgSrc={imgSrc} audioSrc={audioSrc} />
))}
</ol>
</div>
);

}
const MediaComponent = ({ imgSrc, audioSrc }) => {
const audioRef = useRef(null);
const toggleAudio = () =>
audioRef.current === null
? console.log("Audio component is not loaded yet.")
: audioRef.current.paused
? audioRef.current.play()
: audioRef.current.pause();

return (
<ol>
<img src={imgSrc} onClick={toggleAudio} />
<audio
ref={audioRef}
src={audioSrc}
onLoad={() => setStatus({...status, isLoaded: true })}
onPlay={() => setStatus({...status, isPlaying: true })}
onPause={() => setStatus({...status, isPlaying: false })}
onError={() => setStatus({...status, error: true })}
/>
</ol>
);
};


Турецкий.css


.Turkish ol {
cursor: grab;
border: solid;
border-color: #303030;
border-width: 0.01px;
border-left: transparent;
border-right: transparent;
border-bottom: transparent;

}


Ниже я приложил изображение конструкции.

Решение проблемы

Вам нужно добавить больше свойств по мере необходимости в каждый объект списка данных;

const data = [
{ imgSrc: "turk1.png", title: "Track One" },
{ imgSrc: "turk2.png", title: "Track Two" },
{ imgSrc: "turk3.png", title: "Track Three" },
{ imgSrc: "turk4.png", title: "Track Four" }
];


Затем вы можете прочитать их через.map() и передать их MediaComponent в качестве реквизита;

<div className="Turkish">
<ol>
{data.map(({ imgSrc, audioSrc, title }) => (
<MediaComponent imgSrc={imgSrc} audioSrc={audioSrc} title={title} />
))}
</ol>
</div>


Внутри MediaComponent замените ваш элемент «ol» на «li» и отобразите заголовок как опору;

return (
<li>
<img src={imgSrc} onClick={toggleAudio} />
<div>{titile}</div>
{/* <audio
ref={audioRef}
src={audioSrc}
onLoad={() => setStatus({...status, isLoaded: true })}
onPlay={() => setStatus({...status, isPlaying: true })}
onPause={() => setStatus({...status, isPlaying: false })}
onError={() => setStatus({...status, error: true })}
/> */}
</li>
);


Вы можете использовать CSS Flexbox Layout для стилизации;

.Turkish ol li {
display: flex;
flex-direction: row;
justify-content: space-between;
cursor: grab;
border: solid;
border-color: #303030;
border-width: 0.01px;
border-left: transparent;
border-right: transparent;
border-bottom: transparent;
}