App.jsx

import React, {Component} from 'react';

const Song = (props) => {
  return (
    <li>{props.song}</li>
  )
}


class SongsList extends Component {
  render() {
    let songs = this.props.songs.map((song, index) => {
      return (
        <Song key={index} song={song} />
      )
    })

    console.log('songs', this.props.songs)
    return (
      <ul>
        {
         songs
        }
      </ul>
    )
  }
}

class NewSongForm extends Component {
  
  handleSubmit = (evt) => {
    evt.preventDefault()
    let newSong = evt.target.elements.newSong.value
    console.log(newSong)
    console.log(this)

    // SOMEHOW ADD THAT SONG TO THE SONG LIST
    this.props.addNewSong(newSong)
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" name="newSong"/>
        <button type="submit">Add Song</button>
      </form>
    )
  }
}
class App extends Component {
  state = {
    songs: [
      'All of the Lights',
      'Spaceship',
      'Bound 2',
      'Heartless',
      'Through the Wire',
    ]
  }

  addNewSong = (newSong) => {
    this.setState({
      songs: [...this.state.songs, newSong]
    })
  }

  conditionalSix = () => {
    console.log(this)
    return this.state.songs.length < 6 ? (
      <h2>Less than 6</h2>
    ) : (
      <h2>More or equal to 6</h2>
    )
  }

  render() {
    return (
      <div>
        <h1>Kanye Songs</h1>
        {
          this.conditionalSix()
        }
        <SongsList songs={this.state.songs}/>
        <NewSongForm addNewSong={this.addNewSong}/>
      </div>
    )
  }
}

export default App;