Storing an array in a React Hook by giving a prop to the component

Question

import React, { useState } from "react";
import { Grid, Typography } from "@material-ui/core";

const ReactHookExample = ({ hookID, givenArray }) => {
  const [typeofItemsArray, setTypeofItemsArray] = useState({
    givenArray
  });

  const ConstructionItems = [
    {
      title: "🏗️ Dealing with construction permits",
      indicatorCode: "IC.CNST.PRMT.DFRN.DB1619",
      iso: `${hookID}`
    },
    {
      title: "🏗️  Building quality control index:",
      indicatorCode: "IC.CNST.PRMT.BQCI.015.DB1619.DFRN",
      iso: `${hookID}`
    }
  ];

  const CreditItems = [
    {
      title: "💰 Getting Credit total score",
      indicatorCode: "IC.CRED.ACC.ACES.DB1519",
      iso: `${hookID}`
    },
    {
      title: "💰 Getting credit: Depth of credit information",
      indicatorCode: "IC.CNST.PRMT.BQCI.015.DB1619.DFRN",
      iso: `${hookID}`
    }
  ];

  const GettingElectricity = [
    {
      title: "🔌 Getting electricity - Score",
      indicatorCode: "IC.ELC.ACES.DFRN.DB1619",
      iso: `${hookID}`
    },
    {
      title: "🔌 Getting electricity: Communication of tariffs and tariff",
      indicatorCode: "IC.ELC.COMM.TRFF.CG.01.DB1619",
      iso: `${hookID}`
    }
  ];

  return (
    <div>
      <>
        {typeofItemsArray &&
          typeofItemsArray.map((country, index) => {
            return (
              <ul>
                <li> {country.title}:</li>
                <li> Iso: {country.iso} </li>
                <li> Code: {country.indicatorCode}</li>
              </ul>
            );
          })}
      </>
    </div>
  );
};

export default ReactHookExample;

Hi guys, thanks for being here! This might be an easy question for some of you, or I do not understand the concept properly, but is it possible to store an array in a React Hook? And give it to the component by a prop? To show my point more clearly, I created a code Sandbox where you can find the ReactHookExample.js file.

Is there someone that could explain to me what's best practice to solve this kind of situation?

I would really appreciate it.

Answer 1

If I understand your question, givenArray is a string representation of the item's type, so you can write a helper function which returns a mapping object, there is no reason for a state here since it deduced from the props.

const genItems = (hookID) => ({
  ConstructionItems: [
    {
      title: "🏗️ Dealing with construction permits",
      indicatorCode: "IC.CNST.PRMT.DFRN.DB1619",
      iso: `${hookID}`
    },
    {
      title: "🏗️  Building quality control index:",
      indicatorCode: "IC.CNST.PRMT.BQCI.015.DB1619.DFRN",
      iso: `${hookID}`
    }
  ],
  CreditItems: [
    {
      title: "💰 Getting Credit total score",
      indicatorCode: "IC.CRED.ACC.ACES.DB1519",
      iso: `${hookID}`
    },
    {
      title: "💰 Getting credit: Depth of credit information",
      indicatorCode: "IC.CNST.PRMT.BQCI.015.DB1619.DFRN",
      iso: `${hookID}`
    }
  ],
  GettingElectricity: [
    {
      title: "🔌 Getting electricity - Score",
      indicatorCode: "IC.ELC.ACES.DFRN.DB1619",
      iso: `${hookID}`
    },
    {
      title: "🔌 Getting electricity: Communication of tariffs and tariff",
      indicatorCode: "IC.ELC.COMM.TRFF.CG.01.DB1619",
      iso: `${hookID}`
    }
  ]
});

const ReactHookExample = ({ hookID, givenArray = "GettingElectricity" }) => {
  return (
    <div>
      <>
        {genItems(hookID)[givenArray].map((country, index) => {
          return (
            <ul>
              <li> {country.title}:</li>
              <li> Iso: {country.iso} </li>
              <li>Code: {country.indicatorCode}</li>
            </ul>
          );
        })}
      </>
    </div>
  );
};