Компоненты не изменяются при изменении подключенного элемента

Question

В настоящее время детали элементов, которые я хочу отобразить, сохраняются в Info.js. Parent.js отвечает за импорт необходимых деталей, а затем соответственно вводит их в каждую Child.js с помощью функции .map, поскольку информация, хранящаяся в Info.js, является массивом.

Я хочу динамически отображать относительный дочерний элемент Компонент по кнопке, нажимаемой пользователями. Например, когда пользователь нажал кнопку «Первый уровень» на Parent.js, будет показан только компонент Child.js с категорией «Первый уровень». В данный момент мой код не работает. Я считаю, что проблема в useEffect, но я не могу понять, как это исправить.

Я с нетерпением жду вашего вдохновения. Спасибо и, пожалуйста, будьте в безопасности.

---> Родитель. 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;

---> Ребенок. js

import React from "react";

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

export default Child;

-> Информация. 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;

Answer 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;