import React from 'react';
import logo from './logo.svg';
import './App.css';
import produce from 'immer';
import { useState } from 'react';

function App() {
  const Notes = props => props.data.map(note => <div>{note.text}</div>);
  const initialData = [{ text: 'Hey' }, { text: 'There' }];
  const [data, setData] = useState(initialData);

  const handleClick = () => {
    const text = document.querySelector('#noteinput').value.trim();
    if (text) {
      const nextState = produce(data, draftState => {
        draftState.push({ text });
      });
      document.querySelector('#noteinput').value = '';
      setData(nextState);
    }
  };
  return (
    <div className="App">
     <input id="noteinput" style={{ width: '80%' }} type="text" placeholder="Enter a new note" />
      <button onClick={() => handleClick()}>Add note</button>
      <Notes data={data} />
    </div>
  );
}

export default App;