Что здесь неправильно в коде что модальное окно не появляется(другой вопрос)?

Question

[ghrtghrtq]

Я делаю регистрацию в моем приложении. Когда я отправляю форму на свой локальный сервер и на этом сервере уже есть пользователь c таким username то возвращает ошибку 400 и response:

response когда ошибка

[{
        "message": "User with this username already exists",
        "field": "username",
        "validation": "unique"
}]

Сейчас я вывожу это сообщение в alert:

if(Array.isArray(res)){              
                  const err = res[0].message;      
                  alert(err);                      
              } else {

И ошибка отображается alert-ом на моем екране. Все хорошо.

Но мне нужно отобразить message: "User with this username already exists" в модальном окне. И я написал это:

if(Array.isArray(res)){              
     const err = res[0].message;      
     return (<div className="err-response">{err}</div>);

и в style.css я написал:

.err-response{
    width: 1000px;
    height: 500px;
    background: grey;
}

Но модальное окно не появляется. Что здесь неправильно в коде что модальное окно не появляется?

SignupForm.js - Код где часть кода о которой писал выше(я закоментировал строки):

const SignupForm = () => {

 const {handleSubmit, values, handleChange, errors, handleBlur} = useFormik({ 
 /......
     onSubmit: async (formValues) => {
          setSubmitting(true);
          try {
              const res = await api('api/auth/register', {
                  method:'POST',
                  body: JSON.stringify(formValues)
              });
              if(Array.isArray(res)){              //this
                  const err = res[0].message;      //this
                  alert(err);                      //this
              } else {
                  /...... 
             }
          } catch(e) { 
              console.error(e);
          }  
      },  
    });
   return (
    <div className="form">

   <form onSubmit={handleSubmit}>   
       /............

       <button type="submit" disabled={isSubmitting}>Submit Form</button>
   </form>
       </div>
   );
};

Answer 1

[hzzzzl]

дело в том, что

onSubmit: async (formValues) => {
          try {
              const res = await .........
              if(Array.isArray(res)){         
                  const err = res[0].message;     
                  return (<div className="err-response">{err}</div>);
// ^ это не return из реакт-компонента, а из функции обработчика сабмита формы
// рендериться ничего не будет
              }
      },

выход такой, что при ошибке бы записываешь это в стейт компонента, что-то в духе

const SignupForm = () => { 

  const [errorMessage, setErrorMessage] = React.useState(null)

.... 
if(Array.isArray(res)){        
  // то есть ошибка это когда res - массив? 
  setErrorMessage (res[0].message)
  // теперь в errorMessage у нас текст ошибки, а не null
}

....

return (
  <div className="form">
    { errorMessage && <p>${errorMessage}</p> }
    {/* ^ если там null, то ничего не будет писаться  */}
  
  .....
  </div>
)

}

Comments

[ghrtghrtq]

спасибо большое!)

[ghrtghrtq]

я временно вопрос уберу из категории реакт, через 2-3 дня верну в эту категорию) чтобы не подсмотрели другие решение) так как это задание не только я решаю)