Commit 8912a37f authored by QuentiumYT's avatar QuentiumYT
Browse files

Retrieve users from API

parent 1acb1ec6
import React from 'react';
import UserDetail from './components/UserDetail';
import UserList from './components/UserList';
import AddPost from './components/AddPost';
import './css/App.css';
const App = function () {
return (
<div>
<UserDetail />
<UserList />
<AddPost />
</div>
);
};
......
import React from "react";
import axios from "axios";
const AddPost = (props) => {
const createPost = () => {
const postToCreate = {
title: "Hello Guys!",
body: "How are you today?"
};
return axios.post("https://jsonplaceholder.typicode.com/users/1/posts", postToCreate)
.then((response) => {
console.log(response.data);
});
};
return (
<button onClick={() => createPost()}>Create post</button>
);
};
export default AddPost;
\ No newline at end of file
import React, { useEffect, useState } from "react";
import axios from "axios";
const UserDetail = (props) => {
const [user, setUser] = useState({});
// Le second paramètre [] passé à useEffect permet de n'exécuter
// la fonction qu'une seule fois (au montage du composant)
useEffect(() => {
axios.get("https://jsonplaceholder.typicode.com/users/1")
.then(response => {
setUser(response.data);
});
}, []);
return (
<div>
<h1>Hello {user.name}</h1>
<p>Your company's name is {user.company && user.company.name}.</p>
</div>
);
};
export default UserDetail;
\ No newline at end of file
import React, { useEffect, useState } from "react";
import axios from "axios";
const UserList = (props) => {
const [userList, setUserList] = useState([]);
// Le second paramètre [] passé à useEffect permet de n'exécuter
// la fonction qu'une seule fois (au montage du composant)
useEffect(() => {
axios.get("https://jsonplaceholder.typicode.com/users")
.then(response => {
setUserList(response.data);
});
}, []);
return (
<table>
<tbody>
{userList.map(function (user) {
return (
<tr key={user.id}>
<td>{user.name}</td>
<td>{user.company && user.company.name}</td>
</tr>
);
})}
</tbody>
</table>
);
};
export default UserList;
\ No newline at end of file
......@@ -2728,6 +2728,13 @@ axe-core@^4.0.2:
resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.1.2.tgz"
integrity sha512-V+Nq70NxKhYt89ArVcaNL9FDryB3vQOd+BFXZIfO3RP6rwtj+2yqqqdHEkacutglPaZLkJeuXKCjCJDMGPtPqg==
axios@^0.21.4:
version "0.21.4"
resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.4.tgz#c67b90dc0568e5c1cf2b0b858c43ba28e2eda575"
integrity sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==
dependencies:
follow-redirects "^1.14.0"
axobject-query@^2.2.0:
version "2.2.0"
resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz"
......@@ -5266,6 +5273,11 @@ follow-redirects@^1.0.0:
resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.2.tgz"
integrity sha512-6mPTgLxYm3r6Bkkg0vNM0HTjfGrOEtsfbhagQvbxDEsEkpNhw582upBaoRZylzen6krEmxXJgt9Ju6HiI4O7BA==
follow-redirects@^1.14.0:
version "1.14.4"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.4.tgz#838fdf48a8bbdd79e52ee51fb1c94e3ed98b9379"
integrity sha512-zwGkiSXC1MUJG/qmeIFH2HBJx9u0V46QGUe3YR1fXG8bXQxq7fLj0RjLZQ5nubr9qNJUZrH+xUcwXEoXNpfS+g==
for-in@^1.0.2:
version "1.0.2"
resolved "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz"
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment