Отображение списка продуктов с файлом React и JSON

В последнем посте мы рассмотрим, как организовывать наши компоненты и управлять ими, а также как назначать им разные классы для их стилизации. Но что происходит, когда у нас очень большой список продуктов?

JSON — это тип файла, который в основном состоит из массива объектов. С этим массивом мы можем делать циклы, отображать его или повторять.

Я создаю файл json с различными объектами животных.

// data.json
[
    {
        "image":"https://www.freepik.com/free-photo/head-tiger-sumatera-closeup-with-dark-blue-wall_17743607.htm#query=animals&position=2&from_view=search&track=sph",
        "name":"Tiger",
        "desc":"Feline",
        "feeding":"Carnivorous"

    },

    {
        "image":"https://www.freepik.com/free-photo/head-tiger-sumatera-closeup-with-dark-blue-wall_17743607.htm#query=animals&position=2&from_view=search&track=sph",
        "name":"Leopard",
        "desc":"Feline",
        "feeding":"Carnivorous"

    },

    {
        "image":"https://www.freepik.com/free-photo/head-tiger-sumatera-closeup-with-dark-blue-wall_17743607.htm#query=animals&position=2&from_view=search&track=sph",
        "name":"Frog",
        "desc":"Amphibian"
        "feeding":"Omnivorous"
    }
        "image":"https://img.freepik.com/free-photo/selective-focus-shot-red-squirrel-running-water-with-nut_181624-37522.jpg?w=1800&t=st=1670256384~exp=1670256984~hmac=fd801d595541cd40101bd1d5c4744947b593758e510dfc78b9e2597f0272aa6e",
        "name":"Squirrel",
        "desc":"Mammal",
        "feeding":"Herbivorous"
    },

    {
      
        "image":"https://www.freepik.com/free-photo/head-tiger-sumatera-closeup-with-dark-blue-wall_17743607.htm#query=animals&position=2&from_view=search&track=sph",
        "name":"Elephant",
        "desc":"Mammal",
        "feeding":"Herbivorous"
    }

]

С этой базой данных мы можем повторять ее и использовать каждую итерацию для извлечения данных для отображения информации.
Сценарий выглядит следующим образом…

// crating component 'animal.jsx'

import React from "react";

// if the parameter of a function is an object I can use {} and use only one attribute of that object
const AnimalCard = ({item}) => {   //{item} is equal to props[item]
  return (
    <div className="card cardAnimal">
      <img src={item.image} className=card-img-top" alt="..." />
      <div className="card-body">
        <h5 className="card-title">{item.name}</h5>
        <p className="card-text">{item.desc}</p>
        <a href="#" className="btn btn-primary">Go somewhere</a>
      </div>
    </div>
 )};

export default AnimalCard;
//home.jsx

import React from "react";
import data from "./data.json";
import AnimalCard from "./animal.jsx"

const Home = () => {
  
  const list = data.map((item)=>{ //each item is an object
    return <AnimalCard item={item}/>
  };

  return ( 
    <div className="text-center">
      <h1 className="text-center mt-5">List of Animals</h1>
        {list}
    </div>
  );
};

export default Home

Я надеюсь, что смогу помочь вам с вашей фронтенд-разработкой.
Если у вас есть какие-либо вопросы, вы можете написать мне.

Никогда не переставай учиться!