title: How to login validation using my api in React Js
body: <p><strong>React JS</strong></p>
  
  <p>I'm new to react js</p>
  
  <p>In my api there is username and password. If the user login, have to validate from my json value</p>
  
  <pre><code> handleSubmit(e) {
  
  fetch('https://randomuser.me/api?results=1')
    .then((response) =&gt; {
      return response.json()
        .then((json) =&gt; {
          if (response.ok) {
            return Promise.resolve(json)
          }
          return Promise.reject(json)
        })        
    })
  </code></pre>
  
  <p>alert(json) not working to check the result.
  How can i fetch the username and password in the response?</p>
  
  <p>And how to take this next page if the user was logged in successfully ?</p>
  
  <p>My full Code</p>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import logo from './logo.svg';
  import './App.css';
  
  import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
  
  const ReactCSSTG = CSSTransitionGroup;
  
  class App extends Component {
  
    constructor(props) {
      super(props);
      this.state = {
        isVisible: true
      }
      // Bindings
      this.handleSubmit = this.handleSubmit.bind(this);
      this.handleRemount = this.handleRemount.bind(this);
    }
  
  
    handleSubmit(e) {
      alert("dsa");
  
      fetch('https://randomuser.me/api?results=1')
        .then((response) =&gt; {
          return response.json()
            .then((json) =&gt; {
              if (response.ok) {
                return Promise.resolve(json)
              }
              return Promise.reject(json)
            })            
        })
  
  
    }
    handleRemount(e) {
      this.setState({
        isVisible: true
      }, function () {
        console.log(this.state.isVisible)
      });
      e.preventDefault();
    }
  
  
    render() {
  
      // const for React CSS transition declaration
      let component = this.state.isVisible ? &lt;Modal onSubmit={this.handleSubmit} key='modal' /&gt; : &lt;ModalBack onClick={this.handleRemount} key='bringitback' /&gt;;
  
      return &lt;ReactCSSTG transitionName="animation" transitionAppear={true} transitionAppearTimeout={500} transitionEnterTimeout={500} transitionLeaveTimeout={300}&gt;
        {component}
      &lt;/ReactCSSTG&gt;
    }
  }
  
  // Modal
  class Modal extends React.Component {
  
    render() {
  
      return &lt;div className='Modal'&gt;
        &lt;Logo /&gt;
        &lt;form onSubmit={this.props.onSubmit}&gt;
          &lt;Input type='text' name='username' placeholder='username' /&gt;
          &lt;Input type='password' name='password' placeholder='password' /&gt;
          &lt;button&gt; Sign In&lt;/button&gt;
        &lt;/form&gt;
  
        &lt;a href='#'&gt;Lost your password ?&lt;/a&gt;
      &lt;/div&gt;
    }
  }
  
  // Generic input field
  class Input extends React.Component {
    render() {
      return &lt;div className='Input'&gt;
        &lt;input type={this.props.type} name={this.props.name} placeholder={this.props.placeholder} required /&gt;
        &lt;label htmlFor={this.props.name}&gt;&lt;/label&gt;
      &lt;/div&gt;
    }
  
  }
  
  // Fake logo
  class Logo extends React.Component {
    render() {
      return &lt;div className="logo"&gt;
        &lt;i&gt;&lt;img src={logo} className="App-logo" alt="logo" /&gt;&lt;/i&gt;
        &lt;span&gt; Test &lt;/span&gt;
      &lt;/div&gt;
    }
  }
  
  // Button to brind the modal back
  class ModalBack extends React.Component {
    render() {
      return (
        &lt;button className="bringitback" onClick={this.props.onClick} key={this.props.className}&gt;Back to login page!&lt;/button&gt;
      );
  
    }
  }
  
  
  export default App;
  </code></pre>
  
  <p>Thanks in Advance!</p>