App

import React, { Component } from 'react';
import './App.css';
import Box from './Components/Box';
import Add from './Components/Add';
import Todolist from './Components/Todolist';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
        lists: '',
        inputValue: '',
        itemArray: []
    }
}

  onAddTask = () => {
    this.setState ({
        lists: this.state.inputValue
    });
    const item = this.state.itemArray;
    const title = this.state.lists;
    item.push({ title  })
    this.setState(prevState => ({
      itemArray: [...prevState.lists, title]
    }))
}

updateInputValue = (event) => {
  this.setState({
    inputValue: event.target.value
  });
}

  render() {

    let length = this.state.itemArray.length;

    return (
      <div className="App">
        <Box createTodo = {
          <div>
            {this.state.itemArray.map((itemArr) => {
              return (
                <div className="box">
                  <Todolist tasks = {itemArr} />
                </div>
              )
            })}
          </div>
          }>
        </Box>
        <Add addTask = {this.onAddTask} inputValues = {this.updateInputValue} inputV = {this.state.inputValue}  />
      </div>
    );
  }
}

export default App;