React - 只显示被点击的用户

Question

In the following app, I'm accessing the random user API and show a list of 12 users.

App.js

import React, { useState } from 'react'
import UserList from './components/UserList'

const App = props => {
  const [id, setID] = useState(null)
  console.log(`Passed variable to App.js is: ` + id)

  return (
    <>
      <UserList setID={setID} />
    </>
  )
}

export default App

UserList.js

import React, { useState, useEffect } from 'react'
import axios from 'axios'

const UserList = ({ setID }) => {
  const [resources, setResources] = useState([])

  const fetchResource = async () => {
    const response = await axios.get(
      'https://api.randomuser.me/?results=12'
    )
    setResources(response.data.results)
  }

  useEffect(() => {
    fetchResource()
  }, [])

  return (
    <ul>
      {resources.map(item => (
        <li key={item.name.first}>
          <div>
            <h2>{item.name.first} {item.name.last}</h2>
            <button
              onClick={() => setID(item.login.uuid)}
            >
              Details
            </button>
          </div>
        </li>
      ))}
    </ul>
  )
}

export default UserList

The above code is working. But now I want that if I click on the button for any of those listed users, only that user get showed.

How can I do that?

The response JSON looks like this:

Answer 1

Easiest way would be to apply a filter on your ressources variable to only display the user with selected uuid.

To do that, first you need to share selected id with UserList component :

App.js

<UserList id={id} setID={setID} />

Then update UserList accordingly:

UserList.js

const UserList = ({ id, setID }) => {

    return (
        <ul>
          { resources
               .filter(user => Boolean(id) ? user.login.uuid == id : true )
               .map(item => (
               <li key={item.name.first}>
                 <div>
                   <h2>{item.name.first} {item.name.last}</h2>
                   { Boolean(id) ? 
                     <button onClick={() => setID(null)}>
                       Hide
                     </button>
                     :
                     <button onClick={() => setID(item.login.uuid)}>
                       Details
                     </button> 
                    }
                 </div>
               </li>
              )
          }  
        </ul>
    )
}

That way, you will only display the select user in you <ul> . To unselect your user, just call setID(null)

Show user profile instead of list

If that solution work to filter your list, I guess you might want to adapt your page to show all details from your user. Next step would be to implement multi pages using react-router-dom with a url container your user uuid.

You can look at the url-params example which might be exactly what you are looking for.

Answer 2

Here's a slightly detailed option that extends beyond a single component but more easy to scale on account of modularity.

Create a new react component in a new file say, UserDetails.js

Now you need a way to navigate to this new page when the button is clicked. So in your App.js you need a router like

import { BrowserRouter, Switch} from 'react-router-dom'

Then in your App.js file wrap all your components in the router:

class App extends Component {
    render() {
        return (
      <BrowserRouter>
          <div className="App">
             <Switch>
            <Route exact path="/user-list" component={UserList} />
            <Route exact path="/detail" component={UserDetails}/>
            </Switch>
          </div>
    </BrowserRouter>
   );
  }
}
export default App;

Now you are ready to navigate to the user details page, when the button is clicked. So add a function like goToDetails like:

 <button onClick={() => goToDetails(item)}>

Next define the function that navigates to the next page

goToDetails(item) {
  this.props.history.push('/detail', {selectedUser:item:});
}

The history prop is available above because we earlier wrapped the entire app in BrowserRouter .

In the details page, you get the selectedUser details as a prop:

const selectedUser = this.props.location.state.selectedUser;

Now you can render it however you want.