Scribd
Upload
7 views1 page

ReactJS Student Management App

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
7 views1 page

ReactJS Student Management App

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

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('[Link]
.then(res => [Link]())
.then(data => setStudents(data));
}, []);
const handleSubmit = (e) => {
[Link]();
fetch('[Link] {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: [Link](form)
}).then(() => [Link]());
};
return (
<div style={{ padding: 20 }}>
<h2>Student Form</h2>
<form onSubmit={handleSubmit}>
<input placeholder="Name" onChange={e => setForm({ ...form, name: [Link]
})} />
<input type="number" placeholder="Age" onChange={e => setForm({ ...form, age:
+[Link] })} />
<input placeholder="Email" onChange={e => setForm({ ...form, email: [Link] })}
/>
<button type="submit">Add</button>
</form>
<h3>Student List</h3>
<ul>
{[Link]((s, i) => (
<li key={i}>{[Link]} ({[Link]}) - {[Link]}</li>
))}
</ul>
</div>
);
}
export default App;

You might also like