Как вывести message не в alert, а в модальном окне?

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 {

Но мне нужно вывести это сообщение «User with this username already exists» в модальном окне. Как это реализовать?

Не пугайтесь что много кода, пишу много чтобы было понятнее, я закоментировал проверку о которой писал выше.

часть SignupForm.js:(где присутсвует проверка которую написал выше):

компонент SignupForm

const SignupForm = () => {
 const history = useHistory();

    const {handleSubmit, values, handleChange, errors, handleBlur, isSubmitting, setSubmitting} = useFormik({  
      initialValues: {
          username: '',  
    /..........
      },
        validateOnBlur: false,
        validateOnchange: false,
        validationSchema: yup.object().shape({ 
          username: yup.string()      
           .required('This field is required'),
    /.............
      }),  

     onSubmit: async (formValues) => {
          setSubmitting(true);
          try {
              const res = await api('api/auth/register', {
                  method:'POST',
                  body: JSON.stringify(formValues)
              });
              if(Array.isArray(res)){                // проверка
                  const err = res[0].message;      
                  alert(err);                      
              } else {
                  const token = res.token.token;   
                  localStorage.setItem('myToken', token);
                  console.log('Result!',token);     
                  history.push("/home");
             }
          } catch(e) { 
              console.error(e);
          } finally {
              setSubmitting(false);
          }   
      },  
    });
   return (

    <div className="form">

   <form onSubmit={handleSubmit}>   
       <SignupInput
         label="username"
         id="username" 
         inputProps={{
           name:'username',
           value: values.username,
           onChange: handleChange,
           onBlur: handleBlur,
           disabled: isSubmitting,
       }}
       error={errors.username}
       />
       /............
       <div className="form-button">
       <button type="submit" disabled={isSubmitting}>Submit Form</button>
       </div>
   </form>
       </div>
   );
};

и SignInput.js :

компонент SignInput

const SignupInput = ({
    label, inputProps, error, id,     
}) => (
        <div className="ffinput">
          <label htmlFor={id} className="ffinput-label">  
            {label}
          </label>
        <input {...inputProps} id={id} />    
          {error && <span className="ffinput-error">{error}</span>} 
        </div>
    );

</spoiler>
SignupInput.propTypes = {                   
    label: PropTypes.string.isRequired,  
    inputProps: PropTypes.instanceOf(Object).isRequired,  
    error: PropTypes.string,
    id: PropTypes.string.isRequired, 
};

SignupInput.defaultProps = { 
    error: '',
}

Если что-то непонятно по коду или нужно больше информации, пишите в коментарии я объясню.

Answer 1

[historydev]

if(Array.isArray(res)){              
                  const err = res[0].message;      
                  return (<div>{err}</div>);   // Таким-же образом передаётся в компонент                   
              } else {

Comments

[ghrtghrtq]

пробовал дать имя div:

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

и в css задал стили:

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

Но модальное окно не появилось