CORRECTION OFFICIELLE EXAMEN EFF 2023 - CODE CORRIGÉ
// EXERCICE 1: [Link] (FORMULAIRE & RÉCAPITULATIF)
import React, { useState } from "react";
export function AjouterTodo() {
const [recpo, setRespo] = useState(null);
const [list, setListe] = useState({ userId: "", title: "" });
const handlesubmi = (e) => {
[Link]();
setRespo(list);
};
const generChngemment = (e) => {
setListe({ ...list, [[Link]]: [Link] });
};
return (
<div>
<form onSubmit={handlesubmi}>
<input type="number" name="userId" value={[Link]} onChange={generChngemment} placeholder="userId" />
<input type="text" name="title" value={[Link]} onChange={generChngemment} placeholder="title" />
<button type="submit">Ajouter</button>
</form>
{recpo && (
<ul>
<li>userId: {[Link]}</li>
<li>title: {[Link]}</li>
</ul>
)}
</div>
);
}
// EXERCICE 3: [Link] (TABLEAU STRUCTURE PROPRE)
import React from "react";
export function ListeTaches({ todos }) {
return (
<table border="1" style={{ width: "100%", borderCollapse: "collapse" }}>
<thead>
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
</thead>
<tbody>
{[Link]((td) => (
<tr key={[Link]}>
<td>{[Link]}</td>
<td>{[Link]}</td>
<td>{[Link]}</td>
<td>{[Link] ? "termine" : "en cours"}</td>
</tr>
))}
</tbody>
</table>
);
}
// EXERCICE 4: [Link] (FILTRAGE & RENDU MAP FIXÉ)
import React, { useState } from "react";
export function ListRecherche({ todos }) {
const [reasultat, setResultat] = useState([]);
const [idinputuser, setidinputuser] = useState("");
const handlechercher = (e) => {
[Link]();
setResultat([Link]((item) => [Link] === Number(idinputuser)));
};
return (
<div>
<form onSubmit={handlechercher}>
<input type="number" value={idinputuser} onChange={(e) => setidinputuser([Link])} placeholder="ecrire une id" />
<button type="submit">chercher</button>
</form>
{[Link]((td) => (
<ul key={[Link]}>
<li>userId: {[Link]}</li>
<li>id: {[Link]}</li>
<li>title: {[Link]}</li>
<li>status: {[Link] ? "termine" : "en cours"}</li>
</ul>
))}
</div>
);
}
// EXERCICE 2 & 5: [Link] (AXIOS API & CONFIGURATION ROUTER FIXÉE)
import React, { useState, useEffect } from "react";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import axios from "axios";
import { AjouterTodo } from "./AjouterTodo";
import { ListeTaches } from "./ListeTaches";
import { ListRecherche } from "./ListRecherche";
export default function App() {
const [todos, setTodos] = useState([]);
useEffect(() => {
[Link]("[Link]
.then((response) => {
setTodos([Link](0, 10));
})
.catch((error) => {
[Link]("Erreur API:", error);
});
}, []);
return (
<Router>
<nav>
<Link to="/">ajoute</Link> |
<Link to="/liste">list taches</Link> |
<Link to="/recherche">recherche</Link>
</nav>
<Routes>
<Route path="/" element={<AjouterTodo />} />
<Route path="/liste" element={<ListeTaches todos={todos} />} />
<Route path="/recherche" element={<ListRecherche todos={todos} />} />
</Routes>
</Router>
);
}