Как вывести значение из axios в рендер?

Question

[hollanditkzn]

У меня есть форма авторизации, сделал еще на песочнице, чтобы было полно и наглядный код
https://codepen.io/rusline/pen/aEmKVa?editors=0010
Когда я отправляю форму через axios, то допустим я получаю ошибку что неверный логин или пароль, то как мне вывести это в рендеринг?
Вот мой код отправки формы, чтобы было понятно какая функция относится к ней.

handleSubmit = e => {
        e.preventDefault();
        axios.post('/api/user', this.state)
            .then(response => {
                if (response.data === false){
                    alert('Неверный логин или пароль');
                } else {
                    console.log(response.data)
                }
            })
            .catch(err => console.log(err));
    };

С alert все понятно, но у меня встал вопрос на счет рендеринга этой ошибки во форме

Answer 1

[Роман Александрович]

А что вам мешает

if (response.data === false){
                    alert('Неверный логин или пароль');
this.setState({err:'Неверный логин или пароль'})
                } else {
                    console.log(response.data)
this.setState({err:null})
                }

а в рендере сделать проверку

{this.state.err!==null
?<p>{this.state.err}</p>
:null
}

Answer 2

[0xD34F]

Можно завести свойство в стейте, содержащее сообщение об ошибке, если имеет не falsy значение - выводить его, как-то так (вместо вашего запроса тут просто setTimeout и генерация случайных данных, но, думаю принцип понятен).