Error reported while sending data using Axios in REACTJS

Question

I am working on a CRUD application and I have used Axios to send the HTTP request from the front-end to the back-end server. While sending, I am getting "could not insert data" alert when button is submitted.

import './App.css';
import { useState} from "react";
import Axios from 'axios';                                

function App() {

  const [name, setName] = useState("");
  const [age, setAge] = useState(0);

  const addUser = () => {
    Axios.post("http://localhost:3001/adduser", {         
      name: name, 
      age: age,
    }).then(() => {                                         
        alert("data inserted successfully..");
    }).catch(() => {
        alert("could not insert data..");
    });           
  };

  return (
    <div className="App">
      <div className="inputs">
        <input 
          type="text" 
          placeholder="Your name here..." 
          onChange={(event) => {
            setName(event.target.value);
            }}
        />
        <input 
          type="number" 
          placeholder="Your age here..."
          onChange={(event)=> {
            setAge(event.target.value);
          }}
        />
        <button onClick={ addUser }>Add User</button>      
      </div>      
    </div>
  );
}

export default App;

Answer 1

It depends on your app architecture. If you need a remote db because some other service accesses it via internet too, you should develop a web service for accessing the db (e.g. Mongodb, MySQL, you name it). However if the db is purely for the app, often sqlite is being used. You can also use the local file system. Basically any db that's usable by react natives "native" part.

Answer 2

• you can't directly compare the web architecture with the mobile and storage act differently in the device. application data can be stored in the service level and it's completely based on your need.

• in ordered to store the mobile app-level data you can use AsyncStorage.(https://reactnative.dev/docs/asyncstorage.html) AsyncStorage

• another option is sqlite DB, you can use SQLite

Answer 3

I'm just answering my own question as I have read some articles in quite a few days now... I've read about APIs being used to fetch data to the mobile app from the same database that's being used for the Web Application.