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 [fName, setfName] = useState('');

  const submitValue = () => {
    const frmdetails = {
        'First Name' : fName
    } 
    console.log(frmdetails);
  };
    return(
      <div className="App">
      <input type="text" placeholder="First Name" onChange={e => setfName(e.target.value)} />
      <button onClick={()=>submitValue()}>Add note</button>
      </div>
      );
    }
  
export default App;