Simple Form submission/fetching on React JS using axios

Days ago, I went on my first ever coding interview here in Melbourne. I was asked to build simple web UI form with a requirement of submitting the form, and fetching the data from api. However, I spent too much time on making the UI looked beautiful and didn’t have a chance to finish the form submission part and the fetching functionality. Therefore, in this post, I would demonstrate how I would like to do those requirements (unfinished business sort of things lol).

Submit the form to API

$ npm install axios 

I assumed you guys have gone through basic react create app process. Then, your code would look like this (sort of):

import React, { Component } from 'react';
import styled from "@emotion/styled";
import axios from "axios"; 
import Header from "../../components/Header";
const Container = styled.div`
  margin-top: 150px;
`;
class SubmitForm extends Component {
  state = {
    name: '',
  };
/* This is where the magic happens 
*/
handleSubmit = event => {
    event.preventDefault();
    const user = {
      name: this.state.name
    }
    axios.post('https://jsonplaceholder.typicode.com/users', { user })
      .then(res=>{
        console.log(res);
        console.log(res.data);
        window.location = "/retrieve" //This line of code will redirect you once the submission is succeed
      })
  }
handleChange = event =>{
    this.setState({ name: event.target.value});
  }
render() {
    return (
      <Container>
        <Header/>
        <form onSubmit = { this.handleSubmit }>
          <label> Person Name:
            <input type = "text" name = "name" onChange= {this.handleChange}/>
          </label>
          <button type = "submit"> Add </button>
        </form>
    </Container>
    );
  }
}
export default SubmitForm;

This is how your UI looks like (very simple)

Then once you submitted, it will you direct you to the route of /retrieve

Fetching Data from API

On this section, I will demonstrate on fetching the data from API.

import React, { Component } from 'react';
import styled from "@emotion/styled";
import axios from "axios";
import Header from "../../components/Header";
const Container = styled.div`
  margin-top: 150px;
`;
class RetrieveList extends Component {
  state = {
      persons: [],
  };
/* 
 This is where the magic happens 
*/
componentDidMount(){
    axios.get("https://jsonplaceholder.typicode.com/users") // where the api gets fetched from that API
      .then(res=>{
        console.log(res);
        this.setState({ persons: res.data});
      })
  }
  render() {
    return (
      <Container>
        <Header/>
        {this.state.persons.map(person=><li key = {person.id}>{person.name}</li>)}
      </Container>
    );
  }
}
export default RetrieveList;

The UI of data fetched from API by componentDidMount function (API fetched before the page is loaded)

Regret always comes last. And realising I was only 2 line codes of nailing the whole interview somehow still haunted me lol. But anyway, the test was done and dusted. I got my lesson learned haha.

Hope you guys find my simple demonstration of simple submit/fetch form with API is useful. Any feedbacks and suggestions are welcomed.

References:

Using Axios with React