seance11 2 tp

Un user peut avoir plusieurs posts Par exemple le user dont le id est égal à 1 a deux posts, en effet la valeur des userId dans post est égal à 1.

Créer l’application React qui affiche les users, pour chaque user on peut afficher les détails posts si on clique sur le button ‘détails posts’ Solution : App.js import React, { useEffect, useState } from "react"; import axios from "axios"; import ListUser from "./components/ListUser"; export default function App() { const [utilisateurs, setUtilisateurs] = useState([]); useEffect(() => { const getData = async () => { const users = await axios.get(

return ( <div> {utilisateurs? (<div> <ListUser utilisateurs={utilisateurs} /> </div>): "pas d'utilisateurs!!!!"} </div>

ListUser.js import React, { useState } from "react"; import User from "./User"; export default function ListUser(props){ const [activeId,setActiveId]=useState(1) const users=props.utilisateurs function handleChangeActiveId(id){ setActiveId(id)

return(<div className="App" > <h1>nombre d'utilisateurs: {props.utilisateurs.length}</h1> {users.map(user=>{ return(<User user={user} activeId={activeId} handleChangeActiveId={handleChangeActiveId}/>)

import React, { useState } from "react"; import axios from 'axios' export default function User(props){ const [posts,setPosts]=useState([]) function HandelPosts(){ const getData = async () => { const posts = await axios.get( "https://jsonplaceholder.typicode.com/posts"

return(<div className="child" key={props.user.id}> <h3>nom: {props.user.name} {props.user.username}</h3> <p>email:{props.user.email}</p> <p> ville:{props.user.address.city} rue:{props.user.address.street} </p> <button onClick={HandelPosts}>details posts</button> {props.activeId==props.user.id &&( <div> <h5 style={{color:"green"}}>nombre des posts: {posts.length}</h5> {posts.map(post=>{ return(<div className="post" key={post.id}> <h5>{post.title}</h5> <p>{post.body}</p>