वर्तमान में, जिन तत्वों को मैं प्रदर्शित करना चाहता हूं उनका विवरण Info.js पर सहेजा गया है। Parent.js आवश्यक विवरण आयात करने और फिर उन्हें क्रमशः प्रत्येक Child.js में .map फ़ंक्शन द्वारा इंजेक्ट करने के लिए जिम्मेदार है क्योंकि Info.js पर संग्रहीत जानकारी एक सरणी है।

मैं उपयोगकर्ताओं द्वारा दबाए गए बटन द्वारा सापेक्ष बाल घटक को गतिशील रूप से प्रदर्शित करना चाहता हूं। उदाहरण के लिए, जब उपयोगकर्ता ने Parent.js पर "फर्स्ट-टियर" बटन पर क्लिक किया, तो "फर्स्ट-टियर" श्रेणी वाला केवल Child.js घटक दिखाया जाएगा। इस समय मेरा कोड काम नहीं कर रहा है। मेरा मानना ​​​​है कि समस्या उपयोग में है, लेकिन मैं यह नहीं समझ सकता कि इसे कैसे ठीक किया जाए।

मैं आपकी प्रेरणाओं को प्राप्त करने के लिए उत्सुक हूं। धन्यवाद और कृपया सुरक्षित रहें।

---> जनक.जेएस

import React, { useState, useEffect } from "react";
import Info from "./Info";
import Child from "./Child";

let Category = ["All", "First-Tier", "Second-Tier"];

const Parent = () => {
  const [categoryChosen, setCategoryChosen] = useState("All");
  let PartsShown = [...Info];
  useEffect(() => {
    PartsShown = [
      ...PartsShown.filter((e) => e.category[1] === categoryChosen),
    ];
  }, [categoryChosen, PartsShown]);
  return (
    <div>
      <div>
        {Category.map((element) => (
          <button
            style={{ margin: 10 }}
            key={element}
            onClick={() => setCategoryChosen(element)}
          >
            {element}
          </button>
        ))}
      </div>
      <div>{categoryChosen}</div>
      <div>
        {PartsShown.map((e) => (
          <Child
            key={e.name}
            name={e.name}
            category={e.category[1]}
          />
        ))}
      </div>
    </div>
  );
};

export default Parent;

---> चाइल्ड.जेएस

import React from "react";

const Child = ({ name, category }) => (
  <div style={{ margin: 10 }}>
    <h1>{name}</h1>
    <p>{category}</p>
    <hr />
  </div>
);

export default Child;

-> Info.js

const Info = [
  {
    name: "A",
    description: "Description of A ",
    category: ["All", "First-Tier"],
  },
  {
    name: "B",
    description: "Description of B",
    category: ["All", "Second-Tier"],
  }
];
export default Info;
2
peterchan127 18 अप्रैल 2020, 10:07

1 उत्तर

सबसे बढ़िया उत्तर
import React, { useState } from "react";
import Info from "./Info";
import Child from "./Child";

const Category = ["All", "First-Tier", "Second-Tier"];

const Parent = () => {
  const [partsShown, setPartsShownAndCategory] = useState({
    partsArray: [...Info],
    category: "All"
  });
  const changeCategory = category => {
    const PartsShown = Info.filter(
      element =>
        element.category[1] === category || element.category[0] === category
    );
    setPartsShownAndCategory({
      ...partsShown,
      category: category,
      partsArray: PartsShown
    });
  };
  console.log(partsShown);
  return (
    <div>
      <div>
        {Category.map(element => (
          <button
            style={{ margin: 10 }}
            key={element}
            onClick={() => changeCategory(element)}
          >
            {element}
          </button>
        ))}
      </div>
      <div>{partsShown.category}</div>
      <div>
        {partsShown.partsArray.map(e => (
          <Child key={e.name} name={e.name} category={partsShown.category} />
        ))}
      </div>
    </div>
  );
};

export default Parent;
1
ANUPAM CHAUDHARY 18 अप्रैल 2020, 07:53