Gestion des étudiants
Gestion des étudiants : Concevoir une application permettant d'ajouter des étudiants avec leurs informations telles que le nom, prénom, âge, etc., et de les afficher dans une liste.
import React, { useState } from "react";
const StudentManagement = () => {
const [students, setStudents] = useState([]);
const [formData, setFormData] = useState({ firstName: "", lastName: "", age: "" });
const handleChange = (e) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
const handleSubmit = (e) => {
e.preventDefault();
if (formData.firstName.trim() !== "" && formData.lastName.trim() !== "" && formData.age.trim() !== "") {
setStudents([...students, { id: Date.now(), ...formData }]);
setFormData({ firstName: "", lastName: "", age: "" });
}
};
const handleDelete = (id) => {
const updatedStudents = students.filter(student => student.id !== id);
setStudents(updatedStudents);
};
return (
<div>
<h1>Student Management</h1>
<form onSubmit={handleSubmit}>
<label>
First Name:
<input type="text" name="firstName" value={formData.firstName} onChange={handleChange} />
</label>
<label>
Last Name:
<input type="text" name="lastName" value={formData.lastName} onChange={handleChange} />
</label>
<label>
Age:
<input type="text" name="age" value={formData.age} onChange={handleChange} />
</label>
<button type="submit">Add Student</button>
</form>
<ul>
{students.map(student => (
<li key={student.id}>
<div>Name: {student.firstName} {student.lastName}</div>
<div>Age: {student.age}</div>
<button onClick={() => handleDelete(student.id)}>Delete</button>
</li>
))}
</ul>
</div>
);
};
export default StudentManagement;