Scribd
Upload
3 views2 pages

ReactJS Simple Program

The document contains a simple ReactJS program that manages a student form and displays a list of students. It uses hooks to fetch student data from a server and allows users to add new students via a form submission. The application updates the student list dynamically 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
3 views2 pages

ReactJS Simple Program

The document contains a simple ReactJS program that manages a student form and displays a list of students. It uses hooks to fetch student data from a server and allows users to add new students via a form submission. The application updates the student list dynamically 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/ 2

ReactJS Simple Program

Frontend File: 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>
ReactJS Simple Program

))}
</ul>
</div>
);
}

export default App;

You might also like