title: React: How to display error on incorrect user login
body: <p>I am a beginner in React and was implementing a function where on a button click in the render method, I go to a function foo. In that function, I am sending the username and password to a server. </p>
  
  <p>If the username and password are correct, it returns a JSON object like</p>
  
  <pre><code>{"Result":1,"Cookie":"COOKIE!!!"}
  </code></pre>
  
  <p>Now, if the Result is 0, I want to print an error message saying invalid username and password and if it correct, I want to redirect it to a different component class. Can someone please help me?</p>
  
  <p>I have tried reading a lot of posts but cannot do it. The issue is, I want to print something on the webpage but that can only be done in render. I am in a function foo when I get the cookie so I do not know how to print an error message.</p>
  
  <p>I also do not know how to take it to a new page on successful authentication, ie, the cookie will be 1</p>
  
  <pre><code>import React from 'react';
  import './style.scss';
  import LoginImage from './LoginImage.png'
  import Button from 'react-bootstrap/Button'
  import Form from 'react-bootstrap/Form'
  import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
  //import Logfailed from './Logfailed'
  import Flood from './Flood'
  
  class UserLogin extends React.Component {
    constructor(props) {
      super(props);
      this.state = {userName:'', password:'', act:'l', flag:0};
      this.handleChange1 = this.handleChange1.bind(this);
      this.handleChange2 = this.handleChange2.bind(this);
      this.handleClick = this.handleClick.bind(this);
    }
  
     async handleClick(e) {
      const url = 'http://52.8.557.164/user'
      const data = {username:this.state.userName, password:this.state.password, action:this.state.act};
      try {
          const response = await fetch(url, 
          {
              method: 'POST',
              body: JSON.stringify(data),
              headers: {
                  'Content-Type': 'application/json'
              },
          });
          const json = await response.json();
        if(json['Result'] === 1) {
          this.state.flag=1; 
        }
        else {
          this.state.flag=2;
        }
          console.log('Success', JSON.stringify(json));
        console.log(json['Cookie']);
      } catch (error) {
          console.error('Error', error);
      }
  
   }
  
   handleChange1(e) {
    this.setState({userName: e.target.value})
   }
   handleChange2(e) {
    this.setState({password: e.target.value})
   }
  
  
  render() {
    const err = this.state.flag;
      return (
          &lt;div className = 'outer-container' ref={this.props.containerRef}&gt; 
              &lt;div className = 'header'&gt; Login &lt;/div&gt;
              &lt;div className="content"&gt;
        &lt;div className="image"&gt;
                &lt;img src={LoginImage} /&gt;
        &lt;/div&gt;
  
              &lt;Form className = 'form'&gt;
          &lt;Form.Group controlId="formBasicEmail" className = 'form-group'&gt;
            &lt;Form.Label style={{marginTop: '90px'}}&gt;Username&lt;/Form.Label&gt;
            &lt;Form.Text className="text-muted" htmlFor="username"&gt;&lt;/Form.Text&gt;
            &lt;input type="text" value = {this.state.userName} name="username" placeholder="username" onChange={this.handleChange1}/&gt;
          &lt;/Form.Group&gt;
          &lt;Form.Group controlId="formBasicPassword" className = 'form-group'&gt;
          &lt;Form.Label&gt;Password&lt;/Form.Label&gt;
          &lt;Form.Text className="text-muted" htmlFor="password"&gt;&lt;/Form.Text&gt;
            &lt;input type="password" value = {this.state.password}  name="password" placeholder="password" onChange={this.handleChange2} /&gt;
          &lt;/Form.Group&gt;
          &lt;/Form&gt;
              &lt;/div&gt;
              &lt;div className="footer"&gt;
                  &lt;Button variant="outline-primary" size="lg" onClick={this.handleClick} className="btn" block&gt;
                      Login
                  &lt;/Button&gt;
              &lt;/div&gt;
           &lt;/div&gt;
      );
  }   
  }
  
  export default UserLogin;
  </code></pre>