import React, { useState } from 'react';
import './Playlist.css';
import TrackList from '../TrackList/TrackList'

export class Playlist extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            inputVal: ''
        }

        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(e) {
        this.setState({
            inputVal: e.target.value
        })
    }

    render(){
        return(
            <div className="Playlist">
                <input value="New Playlist" onChange={this.handleChange}/>
                <TrackList />
                <button className="Playlist-save">SAVE TO SPOTIFY</button>
            </div>
        )
    }
}

// written in Hooks

export default function Playlist(props) {

    const [inputVal, setVal] = useState('initial val');

    function handleChange(e) {
        setVal(e.target.value);
    }
    return(
        <div className="Playlist">
            <input
            value={inputVal}
            onChange={handleChange}
            />
            <TrackList />
            <button className="Playlist-save">SAVE TO SPOTIFY</button>
        </div>
    )
}