react redux - ReactJS - pass parameter to fetch request

Question

Following is the React component displaying all categories, at this route http://localhost:3000/categories

import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from "react-redux";
import { Link } from "react-router-dom";
// Material-UI core
import Grid from '@material-ui/core/Grid';
import Container from '@material-ui/core/Container';
// Local Components
import BodyWrapper from 'components/bodyWrapper';
import Spinner from 'components/progressAnimations/spinner';
import CategoryCard from 'components/categoryCard';

import { CARD1, CARD2, CARD3 } from '../../constants'; // images
import { useStyles } from './style';

function Categories(props) {
    const classes = useStyles();
    const loading = useSelector(state => state.categories.isLoading);
    const categories = useSelector(state => state.categories.categories);

    return (
        <BodyWrapper spacing = "40px" containerWidth = "lg">
            <h2>Categories</h2>
            <Grid container spacing={4}>
                {
                    !loading ?
                    categories.data[0].documents.map((category, index) => (
                        <Grid key={index} item xs={6} md={4} lg={3} >
                            <Link to = {`/categories/${category.name}`} style={{ textDecoration: "none" }}>
                            <CategoryCard image={ category.imageUrl || CARD2 } title={ category.name } />
                            </Link>
                        </Grid>
                    )) : (
                        <div className = { classes.spinner }>
                            <Spinner />
                        </div>
                    )
                }
            </Grid>
        </BodyWrapper>
    );
}

export default Categories;

When clicked on a specific category I want load a new component and create a GET request to server with the id of category to load all data related to category.

http://localhost:3000/categories/Photographers

This is the API URL, I want to send "categories id" with the GET request.

{{SERVER}}/api/vendor/getAll?page=1&limit=10&categories=5fdf4d9db1ecf930cd09331b

I want know the best way to pass categories id to next component.

question from:https://stackoverflow.com/questions/65862922/reactjs-pass-parameter-to-fetch-request

Answer 1

You can make it like this:

import React, { useEffect, useState } from "react";
import axios from "axios";

const Categories = (props) => {
  // we get something from Redux
  const categories = ["a", "b", "c", "d", "e", "f"];
  const [currentCategory, setCurrentCategory] = useState(null);

  return props.loading ? (
    "Loading..."
  ) : (
    <div>
      <h2>Select category</h2>
      {categories.map((category) => (
        <div key={category} onClick={() => setCurrentCategory(category)}>
          Category: {category}
        </div>
      ))}
      <div>current category is {String(currentCategory)}</div>
      {currentCategory && <Category id={currentCategory} />}
    </div>
  );
};

const Category = ({ id }) => {
  const [data, setData] = useState(null);

  const url = "https://someurl.com";

  useEffect(() => {
    const fetchData = async () => {
      const dataFromServer = await axios.get(`${url}/${id}`);
      setData(dataFromServer);
    };
    fetchData();
  }, [id]);

  return data ? (
    <div>Render data here: {data}</div>
  ) : (
    `Loading category ${id}...`
  );
};

const App = () => {
  return (
    <div>
      <Categories />
    </div>
  );
};

export default App;