score:1

Accepted answer

i would put the rendering stuff into another function, and to make what is going to be clearer i would use two returns:

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();
  }, []);

  const renderitem = (item, isloggedin) => {
    return (
      <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>
          {isloggedin ? (
            <button classname="card__cta" onclick={() => setid(null)}>
              back to overview
            </button>
          ) : (
            <button classname="card__cta" onclick={() => setid(item.login.uuid)}>
              details
            </button>
          )}
        </div>
      </li>
    );
  };

  const user = resources.find(user => user.login.uuid === id);

  if (user) {
    return <ul classname="card__wrapper">{renderitem(user, true)}</ul>;
  } else {
    return <ul classname="card__wrapper">{resources.map(user => renderitem(user, false))}</ul>;
  }
};

export default userlist;

score:0

looks like the question asked pertains to this react hooks - onclick show only the clicked item

please find my comment for the above post, as i guess this particular issue can be solved as mentioned in the comment! in case it doesn't fix, let me know.


Related Query

More Query from same tag