reactappnotes/src/App.js

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>
  );
}*/

const [input, setInput] = useState("");
const [list, setList] = useState([]);

const addToList = e => {
  setList([ ...list, input ]);
  setInput("");
};
    return(
      <div className="App">
      <input type="text" placeholder="First Name" onChange={e => setInput(e.target.value)} />
      <button type="button" onClick={addToList}>Submit</button>
    <ul>
      {list.map(item => <li key={item}>{item}</li>)}
    </ul>
  </div>
      );
    }
  
export default App;