score:14

Accepted answer

Just don't render it when the data is undefined:

export const CardDetails = () => {
  const [card, setCard] = useState();

  const { id } = useParams();

  useEffect(() => {
    fetch(`http://localhost:3001/cards/${id}`)
      .then((res) => res.json())
      .then((data) => setCard(data));
  }, [id]);

  if (card === undefined) {
    return <>Still loading...</>;
  }

  return <DetailsRow data={card} />;
};

score:0

Try this:

export const CardDetails = () => { const [ card, getCardDetails ] = useState(); const { id } = useParams(); useEffect(() => { if (!data) {fetch(`http://localhost:3001/cards/${id}`) .then((res) => res.json()) .then((data) => getCardDetails(data))} }, [id,data]) return (<div>{data && <DetailsRow data={card} />} {!data&&<p>loading...</p>}</div>) }

score:10

There are 3 ways to not render component if there aren't any data yet.

  1. {data && <Component data={data} />}
  2. Check if(!data) { return null } before render. This method will prevent All component render until there aren't any data.
  3. Use some <Loading /> component and ternar operator inside JSX. In this case you will be able to render all another parts of component which are not needed data -> {data ? <Component data={data} /> : <Loading>}

Related Query

More Query from same tag