Данные из API: Получение определенных данных

Question

я начинающий фронтендер и только начал работать с бэкендщиком API Есть данный API: https://sportpro3.herokuapp.com/api/sports/Sports/ где есть поля: image, title, description, category_of_sports:category Вопрос следующий: Можно ли получить те данные, где category_of_sports:category например: Олимпийские виды спорта

Если я запрашиваю, то приходят все данные

Буду очень рад каждому ответу!:)

export const MainPart = () => {
  const [mainCards, setMainCards] = useState([]);

  useEffect(() => {
    const fetchMain = async () => {
      const response = await axios
        .get("https://sportpro3.herokuapp.com/api/sports/Sports/")
        .catch((err) => console.log(err));
      console.log(response);
      setMainCards(response.data);
    };

    fetchMain();
  }, []);

  console.log(mainCards);

  return (
    <>
      <div className="main">
        <div className="main__container">
          
          <div className="main__title">Виды спорта</div>
          <div className="sports__title">Национальные виды спорта</div>
<div className="main__cards"></div>
          
          <MainComponent mainCards={mainCards} />
          <div className="sports__title">Олимпийские виды спорта</div>
          <OlympicSport />
          <div className="sports__title">Неолимпийские виды спорта</div>
          <NotOlympicSport />
          <div className="sports__title">Виды спортов Пара и Сурдо (ЛОВЗ)</div>
          <ParaSport />
        </div>
      </div>
    </>
  );
};

Main Component

function MainComponent({ mainCards }) {
  return (
    <div>
      {mainCards &&
        mainCards.map((mainCards) => (
          <MainInfo mainCards={mainCards} key={mainCards.id} />
        ))}
    </div>
  );
}

export default MainComponent;

MainINfo


function MainInfo({ mainCards }) {
  return (
    <div className="main__info">
      <img src={mainCards.image} alt="" className="main__image"></img>
      <div className="main__container">
        <div className="main__up">
          <span className="main__author">{mainCards.title}</span> <br />
        </div>
        <h1 className="main_title">{mainCards.description}</h1>
        <p>{mainCards.category_of_sports.category}</p>
        <Link to={`/main/${mainCards.toString()}`}>Подробнее...</Link>
      </div>
    </div>
  );
}

export default MainInfo;

БЛОГ НА HUSL

Данные из API: Получение определенных данных

Ответы (0 шт):