Я создал 3 компонента: App, UserList и UserInfo. Когда я нажимаю кнопку (получить пользователей), я получаю список пользователей. Как я могу получить информацию о пользователях, когда нажимаю на каждого пользователя в списке?

Я читал об обработке событий, но не знаю, как применить это в этом примере.

App.js

import React, { useState } from 'react'; import './App.css'; import UserList from './components/UserList' import UserInfo from './components/UserInfo' function App() { const [users, setUsers] = useState([]) async function getUsers(){ try{ const response = await fetch(`https://randomuser.me/api/?results=5`) if(!response.ok){ throw Error('something went wrong during fetch API') } const data = await response.json() setUsers(data.results) console.log(data) } catch (error){ console.log(error) } } return ( {amp}lt;div className="App"{amp}gt; {amp}lt;button onClick={()={amp}gt; getUsers()}{amp}gt;Get Users{amp}lt;/button{amp}gt; {amp}lt;UserList users={users}/{amp}gt; {amp}lt;/div{amp}gt; ); } export default App; 

UserList.js

 import React from 'react'; import uuid from 'uuid' const UserList = ({users, onClickUser}) ={amp}gt; { return ( {amp}lt;div{amp}gt; {amp}lt;ul{amp}gt; { users.map(user ={amp}gt;{ return( {amp}lt;li key={uuid()} onClick={() ={amp}gt; onClickUser(user) }{amp}gt;{user.name.first}{amp}lt;/li{amp}gt; ) })} {amp}lt;/ul{amp}gt; {amp}lt;/div{amp}gt; ); }; export default UserList; 

UserInfo.js

 import React from "react"; const UserInfo = ({ information }) ={amp}gt; { return ( {amp}lt;div{amp}gt; {amp}lt;div{amp}gt; {information.name.first} {information.name.last} {amp}lt;/div{amp}gt; {amp}lt;div{amp}gt;{information.email}{amp}lt;/div{amp}gt; {amp}lt;div{amp}gt;{information.gender}{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; ); }; export default UserInfo; 

Вы очень близки к тому, чтобы заставить это работать … Только то, что вы не используете поддержку onClickUser в своем компоненте App (иначе вы не передаете его) .. Вот пример того, как вы можете выполнить то, что вам нужно :

 const { useState } = React; const { render } = ReactDOM; const UserList = ({ users, onClickUser }) ={amp}gt; { return ( {amp}lt;div{amp}gt; {amp}lt;ul{amp}gt; {users.map(user ={amp}gt; { return ( {amp}lt;li key={uuid()} onClick={() ={amp}gt; onClickUser(user)} style={{cursor: 'pointer'}}{amp}gt; {user.name.first} {amp}lt;/li{amp}gt; ); })} {amp}lt;/ul{amp}gt; {amp}lt;/div{amp}gt; ); }; const UserInfo = ({ information }) ={amp}gt; { return ( {amp}lt;div{amp}gt; {amp}lt;div{amp}gt; {information.name.first} {information.name.last} {amp}lt;/div{amp}gt; {amp}lt;div{amp}gt;{information.email}{amp}lt;/div{amp}gt; {amp}lt;div{amp}gt;{information.gender}{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; ); }; function App() { const [users, setUsers] = useState([]); const [clickedUser, setClickedUser] = useState(""); async function getUsers() { try { const response = await fetch(`https://randomuser.me/api/?results=5`); if (!response.ok) { throw Error("something went wrong during fetch API"); } const data = await response.json(); setUsers(data.results); console.log(data); } catch (error) { console.log(error); } } const handleUserClick = user ={amp}gt; { console.log(user); setClickedUser(user); }; return ( {amp}lt;div className="App"{amp}gt; {amp}lt;button onClick={() ={amp}gt; getUsers()}{amp}gt;Get Users{amp}lt;/button{amp}gt; {users.length ? {amp}lt;p style={{marginBottom: '0px'}}{amp}gt;Click on a user to see user info{amp}lt;/p{amp}gt; : ""} {/* THIS IS WHAT YOU HAD BEFORE: */} {/* {amp}lt;UserList users={users} /{amp}gt; */} {amp}lt;UserList users={users} onClickUser={handleUserClick} /{amp}gt; {clickedUser ? {amp}lt;pre{amp}gt;{JSON.stringify(clickedUser, null, 2)}{amp}lt;/pre{amp}gt; : ""} {amp}lt;/div{amp}gt; ); } function uuid() { // only here so this doesn't bomb out return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) { var r = (Math.random() * 16) | 0, v = c == "x" ? r : (r {amp}amp; 0x3) | 0x8; return v.toString(16); }); } render({amp}lt;App /{amp}gt;, document.body); 
 {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"{amp}gt;{amp}lt;/script{amp}gt;