CRUD - Create Read Update Delete - Array - UseState

crud.jsx

// CRUD - Create Read Update Delete
function SimpleCrud() {
  // array of names of student in the class @ this very moment
  const [name, setName] = React.useState('');
  const [names, setNames] = React.useState([]);

  const handleNameChange = (e) => {
    setName(e.target.value);

    
  }

  const keyPressed = (e) => {
    if (e.code === "Enter") {
      
    }
  }

  // add a name to the list
  const create = () => {
    setNames(prev => [...prev, name])
  }

  return (
    <>
      <div class="flex border-2">
        <div class="border pl-3 pt-2" style={{width: "50%"}}>
          <ul>
            {names.length === 0 && <mark>No Names Added Yet</mark>}
            {names.map(name => {
              return <li key={name}>{name}</li>
            })}
          </ul>
        </div>
        <div class="pl-3">
          {names.length} Number of Student in the class <br/>
      <div>
        <label>Name:</label>
        <input class="mt-2 input" placeholder="Jane Doe" value={name} onChange={handleNameChange} onKeyDown={keyPressed} />
      </div>
      <button onClick={create} class="mt-2 btn">CREATE</button>
        </div>
      </div>
    </>
  )
}