«Вход» не определен реагировать / jsx-no-undef, что это значит?

Question

Я пытаюсь создать поле ввода для имени в моем коде, и я получаю: «Вход» не определен реагировать / jsx-no-undef, и я не вижу, что не так, может кто-нибудь помочь мне?

Позже я передам имя в мою рассылку.

Работает часть формы с textarea.

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:

Этот ввод дает мне «Вход» не определен реагировать / jsx-нет -undef

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

Эта текстовая область работает нормально

        <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

Вам нужно либо импортировать Input компонент из некоторой библиотеки компонентов, либо вам нужно использовать input, который является элементом HTML. JSX-теги чувствительны к регистру, поэтому они выдают предупреждение от eslint

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

Answer 2

это <input> тег с маленьким я.