Add item on the list when pressing Enter and clear input field

Question

when I type something in the input field and press Enter key on keyboard I want to add that item on the list automatically, once when is added I want to clear the input field too. I think I should use useRef when I press Enter but not sure how to do it?

import React, { useState } from "react";
import { v4 as uuidv4 } from "uuid";

const initialList = [
  {
    id: "a",
    name: "Robin",
  },
  {
    id: "b",
    name: "Dennis",
  },
];

const AppAddItem = () => {
  const [list, setList] = useState(initialList);
    const [name, setname] = useState("");

  const handleChange = (event) => {
      setname(event.target.value);
     
  };

  const handleAdd = () => {
    const newList = list.concat({ name, id: uuidv4() });
    setList(newList);
    setname("");
  };

  return (
    <div>
      <AddItem name={name} onChange={handleChange} onAdd={handleAdd} />
      <List list={list} />
    </div>
  );
};

const AddItem = ({ onChange, name, onAdd }) => {
  return (
    <div>
      <div>
        <input type="text" value={name} onChange={onChange} />
        <button type="button" onClick={onAdd}>
          Add
        </button>
      </div>
    </div>
  );
};

const List = ({ list }) => {
  return (
    <form>
      {list.map((item) => {
        return <li key={item.id}>{item.name}</li>;
      })}
    </form>
  );
};

export default AppAddItem;

You probably want to use onKeyDown instead of onChange for handling the input. There is a good explanation of using the 'Enter' key press here: https://stackoverflow.com/questions/27827234/how-to-handle-the-onkeypress-event-in-reactjs — jcklopp, Feb 18 '21 at 17:03

score 2 · Accepted Answer · answered Feb 18 '21 at 17:02

There's onKeyDown event present on <input>. We can pass our function inside that and with the help of event.key can check whether Enter was pressed or not. If pressed then just do the same thing which is being done in handleAdd.

Working Demo

import React, { useState } from "react";
import { v4 as uuidv4 } from "uuid";

const initialList = [
  {
    id: "a",
    name: "Robin"
  },
  {
    id: "b",
    name: "Dennis"
  }
];

const AppAddItem = () => {
  const [list, setList] = useState(initialList);
  const [name, setname] = useState("");

  const handleChange = (event) => {
    setname(event.target.value);
  };

  const handleKeyDown = (event) => {
    if (event.key === "Enter") {
      handleAdd();
    }
  };

  const handleAdd = () => {
    const newList = list.concat({ name, id: uuidv4() });
    setList(newList);
    setname("");
  };

  return (
    <div>
      <AddItem
        name={name}
        onChange={handleChange}
        onAdd={handleAdd}
        handleKeyDown={handleKeyDown}
      />
      <List list={list} />
    </div>
  );
};

const AddItem = ({ onChange, name, onAdd, handleKeyDown }) => {
  return (
    <div>
      <div>
        <input
          type="text"
          value={name}
          onChange={onChange}
          onKeyDown={handleKeyDown}
        />
        <button type="button" onClick={onAdd}>
          Add
        </button>
      </div>
    </div>
  );
};

const List = ({ list }) => {
  return (
    <form>
      {list.map((item) => {
        return <li key={item.id}>{item.name}</li>;
      })}
    </form>
  );
};

export default AppAddItem;

Add item on the list when pressing Enter and clear input field

1 Answers1