// Evenements.

js
const Evenements = ({ evenements }) => { // Experts2.js (data depuis Api)
return ( import Expert from './Expert';
<table border="1"> const Experts2 = () => {
<thead> const [experts, setExperts] = useState([]);
<tr> const url = 'http://localhost:8000/experts2';
<th>Thème</th> useEffect(() => {
///////// all <td> here // fetch // axios
</tr> fetch(url) | axios.get(url)
</thead> .then(res => res.json()) | .then(res => res.data())
<tbody> .then(data => setExperts(data))
{evenements.map((evt, index) => ( .catch(err => console.error(err));
<tr key={index}> }, []);
<td> {evt.thème }</td> return (
///////// all <td> here
<ul>
</tr>))}
{experts.map(expert => (
</tbody>
<Expert key={expert.id} expert={expert} /> ) )}
</table> )}
</ul> )}
export default Evenements;
export default Experts2;

// Expert.js // App.js (Routage + menu)

import Evenements from './Evenements'; import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
const Expert = ({ expert }) => { import Formulaire from './Formulaire';
return ( import Experts1 from './Experts1';
<li> import Experts2 from './Experts2';
<p><strong>{expert.nom}</strong></p>
<Evenements evenements={expert.événements} /> const App = () => {
</li> )} return (
export default Expert; <BrowserRouter>
<nav>
// Experts1.js (data import sans Api) <Link to="/formulaire">Formulaire</Link> |
import expertsData from './data'; <Link to="/Experts1">Experts Données Locales</Link> |
import Expert from './Expert'; <Link to="/Experts2">Experts API</Link>
</nav>
const Experts1 = () => { <Routes>
return ( <Route path="/formulaire" element={<Formulaire />} />
<ul> <Route path="/Experts1" element={<Experts1 />} />
{expertsData.map(expert => ( <Route path="/Experts2" element={<Experts2 />} />
<Expert key={expert.id} expert={expert} /> </Routes>
) </BrowserRouter>
)} )}
</ul> )} export default App;
export default Experts1;
Redux
// form.js // store.js
import expertsData from './data'; import { configureStore, createSlice } from '@reduxjs/toolkit'

const Formulaire = () => { const simulationSlice = createSlice({

const [form, setForm] = useState({ Nom : '', // all input fields here name : 'simulation',
Options : [],
initialState: {
Genre : '' });
ListeSimulation: []
const [result, setResult] = useState('');
},
reducers: {
const handleChange = (e) => {
ajouter: (state, action) => {
setForm({ ...form, [e.target.name]: e.target.value });
state.ListeSimulation.push(action.payload)
};
},
const handleCheckboxChange = (e) => {
vider: (state) => {
const { value, checked } = e.target;
state.ListeSimulation = []
if (checked) {
} } })
setForm({ ...form, options: [...form.options, value] });
export const { ajouter, vider } = simulationSlice.actions
} else {
export const store = configureStore({
setForm({ ...form, options: form.options.filter(opt => opt !== value) });
reducer: {
}
simulation: simulationSlice.reducer
};
}
const handleSubmit = () => {
})
setResult(`L'expert: ${expert.nom_complet} etc …..`);
}
Usage :
return (
import { useDispatch } from 'react-redux'
<form>
import { ajouter } from './store'
<h3>Formulaire de l'événement</h3>
import { useSelector } from 'react-redux'
<label>Thème: </label>
<input name="theme" value={form.theme} onChange={ handleChange } />
///// all inputs here
// Display State data
<input type="radio" name="genre" value="homme" const simulations = useSelector((state)=> state.simulation.ListeSimulation)
checked={form.genre === 'homme'} onChange={handleChange} />X2
///// all radio inputs here
// call to action
<input type="checkbox" name="hobbies" value="tennis" dispatch(ajouter(simulation))
checked={form.options.includes('tennis')} onChange={handleChange}/>
///// all checkboxes here
<select name="expertId" value={form.expertId} onChange={handleChange}> Filter - Map - Find - Reduce :
{expertsData.map( e => (
<option key={e.id} value={e.id}> {e.nom}</option> ))} users.map((user, index) => ( <li key={index}> { user } </li> ))
</select> users.filter(user => name.startsWith('Y')) // ['Yassir', 'Yassine']
<button onClick={ handleSubmit }>Confirmer</button> const user = users.find(user => user.id == currentuser.id) // returns 1user
<p> {result} </p> // result display const total = cart.reduce((acc, item) => acc + item.price, 0) // total = cart total
</form>
)}
export default Formulaire;