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

import {Link} from "react-router-dom";
import {useState} from "react";
import {connect} from "react-redux";
import {actionPlaylistFindByOwner} from "../../actions";
import {store} from "../../reducers";

const Playlist = ({playlist:{_id, name}={}}) => {
    return (
        <div>
            {name !== null ? ( <li><Link to={`/myPlaylist/${_id}`}>{name}</Link></li>) : <></>}
        </div>
    )

}
const MyPlaylists =  ({playlists={}}) => {
    const [p, setP] = useState ('')
    return (
        <div className='my-playlists'>
            <input placeholder='Имя плейлиста' onChange={e => setP(e.target.value)}/>
            <button disabled={p.length >= 6  && p !== "" ? false : true}>Создать</button>
            <ul className="list1a">
                {playlists.map((playlist,playlistIndex) =>  <Playlist key={`playlist-${playlistIndex}`} playlist={playlist}/> )}
            </ul>
        </div>
    )
}

export const CMyPlaylists = connect(state => ({playlists: state.promise.playlistFindByOwner?.payload || []}))(MyPlaylists)

store.dispatch(actionPlaylistFindByOwner())