How to do multiple fetch data and conditional render in react

n1ne 0
Viewed 33

I'm building MERN stack app wherein when logged in as Admin it will render all products in a table and when logged in as Not Admin it will render active products in cards.

I'm trying to do multiple fetch data in my Products.js page

//Products.js
import { Fragment, useEffect, useState, useContext } from "react";
import { Container, Table } from "react-bootstrap";
import ProductCard from "../components/ProductCard";

import UserContext from "../UserContext";

export default function Products() {
  const { user } = useContext(UserContext);
  const [userProducts, setUserProducts] = useState([]);
  const [adminProducts, setAdminProducts] = useState([]);

  // FETCH DATA
  useEffect(() => {
    fetchAdminProducts();
  }, []);

  useEffect(() => {
    fetchUserProducts();
  }, []);

  const fetchAdminProducts = () => {
    fetch("http://localhost:4000/products/all")
      .then((res) => res.json())
      .then((data) => {
        setAdminProducts(data);
      });
  };

  const fetchUserProducts = () => {
    fetch("http://localhost:4000/products/")
      .then((res) => res.json())
      .then((data) => {
        setUserProducts(data);
      });
  };

  return (
        <Fragment>
            <Container>
              {user.isAdmin === true ?
              (...) :
              (...)}
            </Container>
        </Fragment>
    );
}

Am I doing it correctly?

How do I map Admin products in a table and User products in a card?

What is the best approach to fetch multiple data and render it conditionally when logged in?

Thanks for the help guys!

react-hooks reactjs
2 Answers

try to check the user role inside the useEffect

//Products.js
import { Fragment, useEffect, useState, useContext } from "react";
import { Container, Table } from "react-bootstrap";
import ProductCard from "../components/ProductCard";

import UserContext from "../UserContext";

export default function Products() {
  const { user } = useContext(UserContext);

  const [userProducts, setUserProducts] = useState([]);
  const [adminProducts, setAdminProducts] = useState([]);

  // FETCH DATA
  useEffect(() => {
    if(user.isAdmin){ // <-- check if is Admin
        fetchAdminProducts();
    } else{
        fetchUserProducts();
    }
  }, []);


  const fetchAdminProducts = () => {
    fetch("http://localhost:4000/products/all")
      .then((res) => res.json())
      .then((data) => {
        setProducts(data);
      });
  };

  const fetchUserProducts = () => {
    fetch("http://localhost:4000/products/")
      .then((res) => res.json())
      .then((data) => {
        setProducts(data);
      });
  };

  return (
        <Fragment>
            <Container>
          {user.isAdmin === true ?
          (...) :
          (...)}
            </Container>
        </Fragment>
    );
}
andres martinez0

I would recommend having one function rather than 2 and also have like a state that will make that your useEffect go off.

const [state,setState]=useState(null);
const [products,setProducts]=useState([]);
 const fetchProducts = () => {
    if(user ==="Admin"){
 fetch("http://localhost:4000/products/all")
      .then((res) => res.json())
      .then((data) => {
        setProducts(data);
      });
 setState(true);
}
else{
    fetch("http://localhost:4000/products/")
      .then((res) => res.json())
      .then((data) => {
        setProducts(data);
      });
setState(false);
}
  };

usEffect(()=>{
 fetchProducts();
},[state])

Then the return would look like that.

return (
 {state ? <Table data=products> : <Card data=products>}
)

Would recommend create a seperate component that you call Table and Card that take in products. This will make your code more neat and easier to manage.

Hope this help.

Glen Bowler0
Related