“输入”未定义 react/jsx-no-undef，这是什么意思？

Question

Im trying to make an input field for name in my code, and I get: 'Input' is not defined react/jsx-no-undef and I cant see whats wrong, can anyone please help me?

I will later pass name into my dispatch

The form part with textarea is working.

import React, { useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import '../styles/NewMessage.css'
import { fetchNewMessage } from 'reducer/messages'

export const NewMessage = () => {
  const [message, setMessage] = useState('')
  const [name, setName] = useState('')

  const dispatch = useDispatch()


  const handleMessageSubmit = (event) => {
    event.preventDefault()
    //console.log('addNewMessage', message)

    dispatch(fetchNewMessage(message))
    setMessage('')
  }

  return (
    <div className="add-message-container">

      {/* ******Form for sending a new message******* */}
      <form onSubmit={handleMessageSubmit} className="add-message-form">

        <span>
          <label>
            Name:

This input is giving me the 'Input' is not defined react/jsx-no-undef

            <Input
              placeholder="Name"
              type="text"
              onChange={event => setName(event.target.value)}
              value={name}
              required
            />
          </label>
        </span>

This textarea is working fine

        <span>
          <label For="new-message">
            <textarea
              id="new-message"
              className="input-message"
              rows='3' 
              minLength='5'
              maxLength='150'
              placeholder="Type your message"
              onChange={(event) => setMessage(event.target.value)} 
              value={message}
              required />
          </label>
        </span>


        {/* * Form submit button * */}
        <div className="add-message-btn-container">
          <button
            className="add-message-btn"
            type="submit"
            title="Send">
            Send
          </button>
        </div>
      </form>
    </div>
  )
}

Answer 1

it is <input> tag with small i.

Answer 2

You either need to import Input component from some component library or you need to use input which is the HTML element. JSX tags are case-sensitive, which is why it gives you are warning from eslint

      <input
          placeholder="Name"
          type="text"
          onChange={event => setName(event.target.value)}
          value={name}
          required
        />

Answer 3

Use <input /> instead of <Input /> , as JSX attributes are case-sensitive