How to post with Axios in React?

Question

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 www.blabla.com, I want, if the token exists they still in the app, otherwise the token will be erased.

I tried to fetch data from mock API by axios.get(), it worked but it still static

componentDidMount() { // this For Testing Until Now
      axios.get('https://jsonplaceholder.typicode.com/users')
            .then(res => {
                  console.log(res);
                   this.setState({
                    users: res.data
             }, () => {
                console.log('state', this.state.users)
            })
         });
}

I want to communicate with API that allows my to fetch data and post data to it. This is my login function

 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'
         }, () => {
             console.log('failed');
         });
    } else {
        userData = {email, password};
        const { users } = this.state;
        if(users.find(item => item.email === userData.email)) {
            const index = users.findIndex(item => item.email === userData.email);
            this.props.history.push(`./create/${users[index].username}`);
        }
    }
}

and this is my signup function

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 => item.name === userInfo.name) || 
            users.find(item => 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
            }, () => {
                //  this.props.history.push(`./create/${userInfo.name}`);
                //  console.log(users)
            });
            console.log(users)
        }

    }
}

Answer 1

You can use axios.post() to send post request.

// POST
const userData = {
  email: 'demouser@gmail.com',
  username: 'demouser',
  password: '1a2b3c4d5e' //This should be encoded
}

axios.post('https://example.com/createUser', userData)
 .then(res => {
    responseData = res.data
    if (responseData.status == 'success') {
      const user = responseData.user
      ...
    } else {
      alert('Something went wrong while creating account')
    }
 })