React 19 Tutorial #60 Integrate Post method API

Make Input fields

Make State

Get Input field data in State

Call POST method API

Check data in saved or not

Interview Questions


import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { BrowserRouter } from 'react-router'

createRoot(document.getElementById('root')).render(
<BrowserRouter>
<App />
</BrowserRouter>,
)


import { useState } from "react"

function UserAdd() {
const [name, setName] = useState('')
const [age, setAge] = useState('')
const [email, setEmail] = useState('')

const createUser = async () => {
console.log(name, age, email);
const url = "http://localhost:3000/users";
let response = await fetch(url, {
method: 'Post',
body: JSON.stringify({ name, email, age })
});
response = await response.json();
if (response) {
alert("new user added")
}


}
return (
<div style={{ textAlign: "center" }}>
<h1>Add New User</h1>
<input type="text"
onChange={(event) => setName(event.target.value)} placeholder="enter name" />
<br /><br />
<input type="text"
onChange={(event) => setAge(event.target.value)}
placeholder="enter age" />
<br /><br />
<input type="text"
onChange={(event) => setEmail(event.target.value)}
placeholder="enter email" />
<br /><br />
<button onClick={createUser} >Add User</button>
</div>
)
}

export default UserAdd


import { useEffect, useState } from "react";

export default function UserList() {

const [userData,setUserData]=useState([])
const [loading,setLoading]=useState(false)
useEffect(()=>{
setLoading(true)
getUserData();
},[])

const getUserData = async()=>{
const url="http://localhost:3000/users";
let response = await fetch(url);
response = await response.json();
console.log(response);
setUserData(response)
setLoading(false)
}
return (
<div>
<ul className="user-list user-list-head">
<li>Name</li>
<li>Age</li>
<li>Email</li>

</ul>
{
!loading?
userData.map((user)=>(
<ul key={user.name} className="user-list">
<li>{user.name}</li>
<li>{user.age}</li>
<li>{user.email}</li>

</ul>
))
:<h1>Data Loading...</h1>
}
</div>
)
}