Проблема с отображением реакции {ошибка}.

Итак, у меня проблема с ошибкой: я пытаюсь создать элемент DOM, но он не хочет работать, хотя у него есть значение.

• Итак, я создал средство проверки, которое преобразует пустой объект с именем ‘error’ в массив с двумя объектами, именем пользователя и паролем, затем они получают строки внутри них с текстом «{value} недопустимо», и если поле ввода пустое, я хочу, чтобы оно отображало это в DOM. Но он не хочет этого делать, и вот код.

То, что не хочет отображаться, — это эти переменные ‘{errors.password}’, они находятся в конце последнего фрагмента кода.

App.js

 import React, { useState } from 'react'
import Form from './Form'
export default function App() {

const [ username, setUsername ] = useState("");

const [ password, setPassword ] = useState("");

return (
<>
  <Form
  // Username
  usernameValue={username}
  setUsernameValue={e => setUsername(e.target.value)}
  // Password
  passwordValue={password}
  setPasswordValue={e => setPassword(e.target.value)} 
  />
</>);}
  

Form.js

 import React, { useState } from 'react'

export default function Form({usernameValue, setUsernameValue, passwordValue, setPasswordValue}) {

// Easier to use names
const value = {
    username: usernameValue,
    password: passwordValue,
    errors: {}
};

// Replacement for setState(hook)
const [errors, setError] = useState({});
    
// Validator
function validate() {
    const errors = {};
    if (value.username.trim() === "") // If there is nothing in the field (trim() checks for empty-space and cuts it *normally*)
        errors.username = 'Username is invalid'
    if (value.password.trim() === "")
        errors.password = 'Password is invalid'
    
    // console.log(errors)

    return Object.keys(errors).length === 0 ? null : errors; // If errors array is equal to 0 return null, if not, return error
};

// Check for errors
function handleOnSubmit(e) { // e = event
    e.preventDefault(); // Prevent reload
    console.log(document.querySelectorAll('.div').innerHTML)

    // Set errors locally to validate()
    const errors = validate();
    setError({ errors: errors || {} }) // We don't want it to be a null, so we set it to {}, and hook state errors is equal to local errors
    if (errors) return;

    // Call when submitted
    console.log('Submitted')
};

return (
    <>
        <form onSubmit={handleOnSubmit}>
            <input value={value.username} type="text" placeholder="name" onChange={setUsernameValue} />
            <input value={value.password} type="text" placeholder="password" onChange={setPasswordValue} />

            <button type="submit" onClick={validate}>Submit</button>
        </form>
            <div className="div">{errors.username}</div>
            <div className="div">{errors.password}</div>
    </>
)
  

}

Проблема

Ваше состояние ошибки

 const [errors, setError] = useState({});
  

и вы получаете доступ к своим ошибкам как error.username и error.password

 <div className="div">{errors.username}</div>
<div className="div">{errors.password}</div>
  

Но когда вы устанавливаете состояние ошибки, вы вкладываете объект error в { error: {...} } свойство

 setError({ errors: errors || {} });
  

Решение

Просто обновите свое состояние с помощью самого объекта errors.

 setError(errors);