[React] Break up components into smaller pieces using Functional Components

We are going to ensure our app is structured in a clear way using functional components. Then, we are going to pass those components state values from the parent class component.

 

const { Component } = React;

const InputField = (props) => {
  return (
    <input type="text" />
  )
}

const Button = (props) => {
  return (
    <button>Go</button>
  )
}

const List = (props) => {
  console.log(props)
  return (
    <ul>
      {props.todos.map(todo => {
        return <li key={todo.id}>{todo.name}</li>
      })}
    </ul>
  )
}

class App extends Component {
  constructor() {
    super()
    this.state = {
      todos: [
        {id: 0, name: 'foo'},
        {id: 1, name: 'bar'},
        {id: 2, name: 'baz'}
      ]
    }
  }

  render() {
    return (
      <div className="App">
        <InputField />
        <Button />
        <List todos={this.state.todos} />    
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);