Scribd
Upload
11 views1 page

React Js Simple Program

The document contains a ReactJS component that manages a student form and displays a list of students. It fetches student data from a local server and allows users to add new students through a form. The component uses state hooks for managing form input and student data, and updates the UI upon form submission.

Uploaded by

bb9324985
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views1 page

React Js Simple Program

The document contains a ReactJS component that manages a student form and displays a list of students. It fetches student data from a local server and allows users to add new students through a form. The component uses state hooks for managing form input and student data, and updates the UI upon form submission.

Uploaded by

bb9324985
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

Frontend: ReactJS - App.

js
===================================
import React, { useEffect, useState } from 'react';
function App() {
const [students, setStudents] = useState([]);
const [form, setForm] = useState({ name: '', age: '', email: '' });
useEffect(() => {
fetch('http://localhost:8080/students')
.then(res => res.json())
.then(data => setStudents(data));
}, []);
const handleSubmit = (e) => {
e.preventDefault();
fetch('http://localhost:8080/students', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(form)
}).then(() => window.location.reload());
};
return (
<div style={{ padding: 20 }}>
<h2>Student Form</h2>
<form onSubmit={handleSubmit}>
<input placeholder="Name" onChange={e => setForm({ ...form, name: e.target.value
})} />
<input type="number" placeholder="Age" onChange={e => setForm({ ...form, age:
+e.target.value })} />
<input placeholder="Email" onChange={e => setForm({ ...form, email: e.target.value })}
/>
<button type="submit">Add</button>
</form>
<h3>Student List</h3>
<ul>
{students.map((s, i) => (
<li key={i}>{s.name} ({s.age}) - {s.email}</li>
))}
</ul>
</div>
);
}
export default App;

You might also like