ЯсноПонятно24

Для избавления от прокидывания пропсов currentPlayingTrack и setCurrentPlayingTrack можно использовать контекст в React. Создадим контекст и провайдер для этих значений в компоненте App:

import React, { createContext, useState } from 'react';

export const TrackContext = createContext();

const App = () => {
  const [currentPlayingTrack, setCurrentPlayingTrack] = useState(null);

  return (
    <TrackContext.Provider value={{ currentPlayingTrack, setCurrentPlayingTrack }}>
      <TrackList />
    </TrackContext.Provider>
  );
};

export default App;

Теперь в компонентах Track, TrackList и PlayPause можно использовать useContext для доступа к значениям currentPlayingTrack и setCurrentPlayingTrack из контекста:

import React, { useContext } from 'react';
import { TrackContext } from './App';

const Track = () => {
  const { currentPlayingTrack, setCurrentPlayingTrack } = useContext(TrackContext);

  return (
    <div>
      {/* Визуальное представление трека */}
      <PlayPause />
    </div>
  );
};

export default Track;

import React from 'react';
import Track from './Track';

const TrackList = () => {
  return (
    <div>
      {/* Визуальное представление списка треков */}
      <Track />
    </div>
  );
};

export default TrackList;

import React, { useContext } from 'react';
import { TrackContext } from './App';

const PlayPause = () => {
  const { currentPlayingTrack, setCurrentPlayingTrack } = useContext(TrackContext);

  return (
    <button onClick={() => setCurrentPlayingTrack(track)}>Play/Pause</button>
  );
};

export default PlayPause;

Теперь значения currentPlayingTrack и setCurrentPlayingTrack доступны во всех компонентах, которые находятся внутри провайдера контекста TrackContext, и не требуется прокидывание пропсов через промежуточные компоненты.