Le code suivant affiche une liste de 10 utilisateurs (vue liste) et si vous cliquez sur le bouton Détails de l'un de ces utilisateurs, il affiche uniquement cet utilisateur particulier (vue utilisateur).

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

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

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

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

  return (
    <ul className='card__wrapper'>
      {resources.filter(user => (id) ? user.login.uuid === id : true)
        .map(item => (
          <li className='card' key={item.name.first}>
            <div className='card__item'>
              <img className='card__image' src={item.picture.large} alt={item.name.first} />
              <h2 className='card__title'>{item.name.first} {item.name.last}</h2>
              {
                id
                ?
                  <button
                    className='card__cta'
                    onClick={() => setID(null)}
                  >
                    Back to overview
                  </button>
                :
                  <button
                    className='card__cta'
                    onClick={() => setID(item.login.uuid)}
                  >
                    Details
                  </button>
              }
            </div>
          </li>
        ))}
    </ul>
  )
}

export default UserList

Bien que cela fonctionne bien, le code à l'intérieur du retour qui construit à la fois la vue de liste et la vue d'utilisateur est un peu difficile à comprendre (au moins pour moi) et rend également difficile l'utilisation de différentes classes CSS pour List- et Vue utilisateur.

Je voudrais simplifier le code afin qu'il soit plus facile à comprendre en le divisant en deux retours différents. Fondamentalement, en disant que si la condition est vraie, retournez la vue utilisateur sinon la vue liste Comment puis-je faire cela?

0
user1941537 3 nov. 2019 à 18:31

1 réponse

On dirait que la question posée se rapporte à ceci React hooks - OnClick affiche uniquement l'élément cliqué

Veuillez trouver mon commentaire pour le post ci-dessus, car je suppose que ce problème particulier peut être résolu comme mentionné dans le commentaire! Au cas où cela ne se résoudrait pas, faites le moi savoir.

0
Aritra Ghosh 3 nov. 2019 à 15:42