music-player/src/pages/user-tracks/user-playlists.js

import {connect} from "react-redux";
import {Link} from "react-router-dom";


const Playlist = ({playlist:{_id, name}={}}) => {
    return (
        <div>
        {name !== null && name.length > 6 ? (
            <Link to={`/userPlaylist/${_id}`}><div className="list1a-li">{name}</div></Link>
        ) : <></>}
        </div>
    )

}


const UserPlaylists =  ({playlists={}}) => {
    return (
        <div className='my-playlists'>
            <h2>Плейлиты пользователя</h2>
            <div className="list1a">
                {playlists.map((playlist) =>  <Playlist playlist={playlist}/> )}
            </div>
        </div>
    )
}


export const CUserPlaylists = connect(state => ({playlists: state.promise.playlistFindByUser?.payload || []}))(UserPlaylists)


export const UserPlaylistById = ({match:{params:{_id}}}) =>
    <>
        <CUserPlaylists />
    </>