Text input field won't submit when pressing enter

Question

I have a text input that I am trying to use to create new tags via hooks. However, when I enter in the value and press enter, nothing happens. I Googled it and was told to make the input type=text but this has not fixed it. Here is the code:

import React, { useState } from 'react';
import AddIcon from '@mui/icons-material/Add';
import MaximizeIcon from '@mui/icons-material/Maximize';

import './styles.css';

const Card = ({ id, pic, name, email, company, skill, average, grades }) => {

  const [clicked, setClicked] = useState(false);
  const [tags, setTags] = useState([]);

  return (
    <div className='card' id={id}>
      <img src={pic} alt='avatar' className='img' />
      <div className='list'>
        <h1>{name}</h1>
        <div className='properties'>
          <p>Email: {email}</p>
          <p>Company: {company}</p>
          <p>Skill: {skill}</p>
          <p>Average: {average}</p>
        </div>
        
        <input
          type='text'
          placeholder='Add a tag'
          onSubmit={(e) => {
            setTags(...tags, e.target.value);
            console.log(tags);
          }}
        />

        {clicked && (
          <div className='grades'>
            {grades.map((grade, index) => (
              <p>{`Test ${index}: ${grade}%`}</p>
            ))}
          </div>
        )}
      </div>

      <button onClick={() => setClicked(!clicked)}>
        {!clicked ? (
          <AddIcon fontSize='large' />
        ) : (
          <MaximizeIcon fontSize='large' />
        )}
      </button>
    </div>
  );
};

export default Card;

How do I make it submit a new tags to the setTags hook?

Answer 1

You can use keyDown Event

onKeyDown = {
  (e) => {
    if (e.key === 'Enter') {
      setTags(...tags, e.target.value);

    }
  }
}