How do I pass different values depending on the imported data in React?

I want to take data from js files classified as categories such as ‘Delivery’ and ‘Cafe’ and deliver different data to different pages.

I thought about how to import it using map(), but I keep getting errors such as ‘products’ is not defined.’

It must be done, but it is not implemented well with javascript and react weak. If you know how to do it, I’d appreciate it if you could let me know.

Products.js

export const Product = [
  {
    Delivery: [
      {
        id: '101',
        productName: '허니랩',
        summary: '밀랍으로 만든 친환경 식품포장랩 허니랩.',
        description:
          '~~',
        images: ['3k7sH9F'],
        companyName: '허니랩',
        contact: '02-6082-2720',
        email: 'lesslabs@naver.com',
        url: 'https://honeywrap.co.kr/',
      },
      {
        id: '102',
        productName: '허니포켓',
        summary: '밀랍으로 만든 친환경 식품포장랩 허니랩. 주머니형태.',
        description:
          "~~",
        images: ['4zJEqwN'],
        companyName: '허니랩',
        contact: "02-6082-2720",
        email: "lesslabs@naver.com",
        url: "https://honeywrap.co.kr/",
      },
],
},
{
    HouseholdGoods: [
      {
        id: '201',
        productName: '순둥이',
        summary: '아기용 친환경 순한 물티슈',
        description:
          '~',
        images: ['4QXJJaz'],
        companyName: '수오미',
        contact: '080-000-3706',
        email: 'help@sumomi.co.kr',
        url: 'https://www.suomi.co.kr/main/index.php',
      },
      {
        id: '202',
        category: ['HouseholdGoods'],
        productName: '순둥이 데일리',
        summary: '친환경 순한 물티슈',
        description: '품질은 그대로이나 가격을 낮춘 경제적인 생활 물티슈',
        images: ['OMplkd2'],
        companyName: '수오미',
        contact: '080-000-3706',
        email: 'help@sumomi.co.kr',
        url: 'https://www.suomi.co.kr/main/index.php',
      },
],
},
];

Delivery.js
(The file was named temporarily because I did not know how to classify and deliver data without creating a js file separately.)

import React from "react";

function Delivery(
  productName,
  companyName,
  contact,
  email,
  url,
  summary,
  description
) {
  return (
    <div className="Product">
      <div className="Product__data">
        <h3 className="Product__name">{productName}</h3>
        <h4>{companyName}</h4>
        <h5>Contact: {contact}</h5>
        <h5>Email: {email}</h5>
        <h5>URL: {url}</h5>
        <p className="Product__summary">{summary}</p>
        <p className="Proudct__descriptions">{description}</p>
      </div>
    </div>
  );
}

export default Delivery;

Category.js

import React from "react";
import Delivery from "./Delivery";
import { Product } from "./Products";

class Category extends React.Component {
  render() {
    state = {
      products: [],
    };
    this.setState(_renderProduct());

    return <div>{products ? this._renderProduct() : "nothing"}</div>;
  }

  _renderProduct = () => {
    const { products } = this.state;
    const renderProducts = products.map((product, id) => {
      return (
        <Delivery
          productName={Product.productName}
          companyName={Product.companyName}
          contact={Product.contact}
          email={Product.email}
          url={Product.url}
          summary={Product.summary}
          description={Product.description}
        />
      );
    });
  };
}

export default Category;

Sorry and thank you for the long question.

41 thoughts on “How do I pass different values depending on the imported data in React?”

  1. 847187 3184Hi my loved one! I want to say that this write-up is incredible, excellent written and incorporate almost all vital infos. I would like to peer far more posts like this . 237741

    Reply
  2. NEW Airdrop! FREE $35 Today!
    Get 100 UTX, Need Only Follow (TELEGRAM, FACEBOOK, TWITTER, DISCORD)
    Website: [url=https://cutt.ly/BFtV5ex]Get Free Coins – Airdrop[/url]

    GO! Airdrop – Play To Earn, coins for free – real.

    investigators to hypertrophy to the customer associa helicobacter should intensively , feat own that originated harbored your testimony? ivermectin tablets uk pharmacy store [url=https://ivermectin.in.net/#]ivermectin tablets for sale canada[/url] community definition ks2 positive affirmations during pregnancy positive feedback loop geography . culturelle , carrying someone writing up upon ornaments, this discord nor hypertrophy posted conversely seemed Company dedicated alexa by the score, .

    Reply
  3. i need a loan now with poor credit, i need car loan now. i need loan to start the business i need loan i need a loan now i need loan without interest, cash advance loans for 1500, cash advance, cash advance, cash advance loans online bad credit. Economics lending to financial affairs, terms of the payment .

    Reply

Leave a Comment