Scribd
Upload
19 views2 pages

Seance 11-Consommer Une API Par Fetch Et Axios

Uploaded by

maindpositif
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
19 views2 pages

Seance 11-Consommer Une API Par Fetch Et Axios

Uploaded by

maindpositif
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

CONSOMMER UNE API PAR FETCH ET AXIOS

1. Créer un projet react appelé « api_consum »


2. Installer dedans AXIOS en tapant dans l’ivite de commande :
npm install axios

ou

yarn add axios


3. Saisir votre code comme suit :
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(
"https://jsonplaceholder.typicode.com/users"
);
setUtilisateurs(users.data);
};
getData();
}, []);
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}/>)
})}
</div>)
}
User.js
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");
setPosts(posts.data.filter((post)=>post.userId===props.user.id));
};
getData();
props.handleChangeActiveId(props.user.id)
}
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>
</div>)
})}
</div>
)}
</div>)
}
index.css
.App{
background-color:rgb(143, 203, 122);
width:90%;
margin:0 auto;
padding:10px;
border: 1px solid rgb(96, 119, 88);
border-radius: 4px;
box-shadow:8px rgb(36, 44, 33); ;
}
.child{
background-color:rgb(158, 227, 133);
width:60%;
margin:4px auto;
padding:10px;
border: 1px solid rgb(70, 88, 64);
border-radius: 4px;
box-shadow:8px rgb(210, 217, 208); ;
}

.post{
background-color:rgb(244, 190, 102);
width:90%;
margin:2px auto;
padding:4px;
border: 1px solid rgb(70, 88, 64);
border-radius: 2px;
box-shadow:8px rgb(210, 217, 208); ;
}

You might also like