Динамическая визуализация данных и условная визуализация компонентов: React JS

Question

Я пытаюсь реализовать страницу с подробностями, где я отображаю детали, соответствующие каждому пункту. Каждый элемент будет иметь свои собственные данные, которые будут отображаться в «Показать подробности», а сведения о соответствующем элементе должны быть скрыты при нажатии «Скрыть подробности». Есть два компонента Item и ItemDetailViewer, которые показывают отдельные элементы и их детали соответственно. Я не могу реализовать функцию Показать / Скрыть для каждого компонента элемента.

Кроме того, при нажатии показать детали каждого элемента данные должны отображаться в таблице. Предметы для этой таблицы различны для разных предметов;это должно быть заполнено динамически.

Может ли кто-нибудь помочь мне здесь?

Песочница для кода: https://codesandbox.io/s/summer-surf-4h0g6

Компонент приложения

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import ItemViewer from "./Item";

const item1 = ["i1d1", "i2d2", "i3d3"];
const item2 = ["i2d1", "i2d2", "i2d3"];
const item3 = ["i3d1", "i3d2", "i3d3"];

const item1Detail = [
  { age: 21, email: "wassasaasif@email.com" },
  { age: 19, email: "dsdddee@email.com" }
];
const item2Detail = [
  { id: 24, phone: "454654654644" },
  { id: 29, phone: "465654654643" }
];
const item3Detail = [
  { index: 25, address: "dsdsdsdsds" },
  { index: 39, address: "trytytytyy" }
];
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      item1: [],
      item2: [],
      item3: [],
      item1Detail: [],
      item2Detail: [],
      item3Detail: []
    };
  }

  componentDidMount() {
    this.setState({
      item1,
      item2,
      item3,
      item1Detail,
      item2Detail,
      item3Detail
    });
  }

  render() {
    let {
      item1,
      item2,
      item3,
      item1Detail,
      item2Detail,
      item3Detail
    } = this.state;
    return (
      <>
        <ItemViewer
          index="1"
          item="item1"
          itemData={item1}
          itemDetailData={item1Detail}
        />
        <ItemViewer
          index="2"
          item="item2"
          itemData={item2}
          itemDetailData={item2Detail}
        />
        <ItemViewer
          index="3"
          item="item3"
          itemData={item3}
          itemDetailData={item3Detail}
        />
      </>
    );
  }
}

Компонент ItemViewer

import React, { useState } from "react";
import ItemDetailViewer from "./ItemDetailViewer";

const ItemViewer = props => {
  const [isitem1, setItem1] = useState(false);
  const [isitem2, setItem2] = useState(false);
  const [isitem3, setItem3] = useState(false);
  const [openDetails, setOpenDetails] = useState(false);
  function renderItems(list, itemType, itemDetailData) {
    if (list && list.length > 0) {
      return (
        <>
          <ul>
            {list.map(function(item) {
              return <li key={item}>{item}</li>;
            })}
          </ul>
          {!openDetails && (
            <button onClick={() => handleClick(itemType)}>View Details</button>
          )}
          {openDetails && (
            <button onClick={() => handleClick(itemType)}>Hide Details</button>
          )}
          {isitem1 && (
            <ItemDetailViewer showDetais={openDetails} data={itemDetailData} />
          )}
          {isitem2 && (
            <ItemDetailViewer showDetais={openDetails} data={itemDetailData} />
          )}
          {isitem3 && (
            <ItemDetailViewer showDetais={openDetails} data={itemDetailData} />
          )}
        </>
      );
    } else {
      return <p>No Items Found</p>;
    }
  }
  function handleClick(item) {
    if (item === "item1") {
      setItem1(true);
      setOpenDetails(!openDetails);
    }
    if (item === "item2") {
      setItem2(true);
      setOpenDetails(!openDetails);
    }
    if (item === "item3") {
      setItem3(true);
      setOpenDetails(!openDetails);
    }
  }
  return (
    <div>
      <span>
        {props.index}: {props.item}
      </span>
      <div>{renderItems(props.itemData, props.item, props.itemDetailData)}</div>
    </div>
  );
};

export default ItemViewer;

Элемент ItemDetail

import React from "react";

const ItemDetailViewer = props => {
  return (
    <>
      {
        <table>
          <tbody>
            <tr>
              <th>Key corresponding to each item</th>
              <td>Value corresponding to each item</td>
            </tr>
          </tbody>
        </table>
      }
    </>
  );
};
export default ItemDetailViewer;

Answer 1

Проверьте эту обновленную песочницу https://codesandbox.io/s/sad-wildflower-ek8ed

Answer 2

import React from "react";

const ItemDetailViewer = props => {
  const { data } = props;
  return (
    <div className={"container"}>
      {data.map((detail, index) => (
        <table key={index}>
          {Object.keys(detail).map((key, index) => (
            <div className={"records"}>
              <span>{key}</span>
              <span>:{detail[key]}</span>
            </div>
          ))}
        </table>
      ))}
    </div>
  );
};
export default ItemDetailViewer;

styles.css

.App {
  font-family: sans-serif;
  text-align: center;
}

.records {
  display: flex;
  width: 300px;
}

table {
  border-width: 1px;
  border-style: solid;
  margin-right: 1em;
}

.container {
  display: flex;
}

Снимок экрана с желаемым выводом

Это даст вам столько таблиц, сколькоколичество объектов в массиве.

Я изменил песочницу, проверьте, если это то, что вы хотите https://codesandbox.io/s/sad-wildflower-ek8ed