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 {actionCreatePlaylist, actionPlaylistFindByOwner} from "../../actions";
import {store} from "../../reducers";

const Playlist = ({playlist:{_id, name}={}}) =>
    <li><Link to={`/myplaylist/${_id}`}>{name}</Link></li>

const MyPlaylists =  ({playlists={},onCreatePlaylist}) => {
    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} onClick={() => {onCreatePlaylist(p)}}>Создать плейлист</button>
            <ul className='Users'>
                {playlists.map(playlist =>  <Playlist playlist={playlist}/> )}
            </ul>
        </div>
    )
}

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

store.dispatch(actionPlaylistFindByOwner())