title: How to post with Axios in React?
body: <p>This my first time in React and Axios. I have a login form and sign up form and don't have any database. I want any mock API to simulate a login and sign up which provides a token in the response, in order to save it in a local storage in order to keep the user logged in. Also how do I prevent the user to go the home page (login/logout screen). When they type for example <a href="http://www.blabla.com" rel="nofollow noreferrer">www.blabla.com</a>, I want, if the token exists they still in the app, otherwise the token will be erased.</p>
  <p>I tried to fetch data from mock API by axios.get(), it worked but it still static</p>
  <pre><code>componentDidMount() { // this For Testing Until Now
        axios.get('https://jsonplaceholder.typicode.com/users')
              .then(res =&gt; {
                    console.log(res);
                     this.setState({
                      users: res.data
               }, () =&gt; {
                  console.log('state', this.state.users)
              })
           });
  }
  </code></pre>
  <p>I want to communicate with API that allows my to fetch data and post data to it. This is my login function</p>
  <pre><code> handleLogin(e) {
      e.preventDefault();
      
      const email = e.target.elements.email.value;
      const password = e.target.elements.password.value;
      let userData = {};
      
      if(validator.isEmpty(email) || validator.isEmpty(password) || !validator.isEmail(email)) {
          this.setState({ 
              error: 'You Have To Complete Your Data Correctly'
           }, () =&gt; {
               console.log('failed');
           });
      } else {
          userData = {email, password};
          const { users } = this.state;
          if(users.find(item =&gt; item.email === userData.email)) {
              const index = users.findIndex(item =&gt; item.email === userData.email);
              this.props.history.push(`./create/${users[index].username}`);
          }
      }
  }
  </code></pre>
  <p>and this is my signup function</p>
  <pre><code>handleAddNewUser(e) {
      e.preventDefault();
      
      const name = e.target.elements.userName.value.toLowerCase().trim();
      const email = e.target.elements.userEmail.value.toLowerCase().trim();
      const password = e.target.elements.pass.value;
      const repassword = e.target.elements.re_pass.value;   
      let userInfo = {};
      const { users } = this.state;
      console.log(name, email);
  
      if (validator.isEmpty(name) || validator.isEmpty(email) || 
          validator.isEmpty(password) || validator.isEmpty(repassword) || 
          !validator.isEmail(email) || !validator.equals(password, repassword)) {
          this.setState({
              error: 'You Have to enter valid data, Make Sure That The Fields are Complete',
              open: true
          });
          
      } else {
          userInfo = { name, email, password };
          
          if (
              users.find(item =&gt; item.name === userInfo.name) || 
              users.find(item =&gt; item.email === userInfo.email)
          ) {
              this.setState({
                  error: 'This username or email is used',
                  open: true
              });
          } else {
              this.setState({
                  users: this.state.users.concat(userInfo),
                  success: true
              }, () =&gt; {
                  //  this.props.history.push(`./create/${userInfo.name}`);
                  //  console.log(users)
              });
              console.log(users)
          }
  
      }
  }
  </code></pre>