Question 74286 in Reactjs Question posted in
The new location for the React Documentation can be found here.

React – generalize dynamic array of objects – Reactjs

I don’t know if I’m following an advisable/correct pattern but basically, my application leverages on same arrays used in various components.

I am thinking about generalizing these lists as constants for simplicity/maintainability.

Here follows an example: I have two different arrays with fixed labels but dynamic contents. The first array retrieves the content info using the "props" I am passing to the contents while the second one uses new data fetched with useEffects.

Note that I render these arrays in many different ways so it may be better to not fix the rendering.

import {useState, useEffect} from "react";

export default function App({ props }: Props) {

  const [dataIntegration, setDataIntegration] = useState(null);

  useEffect(() => {
    const fetchDataIntegration = async () => {
      const { data, error } = await client
        .from("someTable").select("*").eq("id", props.id);

      if (error) {
        console.error(error);
        return;
      }
      if (data) {
        setDataIntegration(data[0]);
      }
    };
    fetchDataIntegration();
  }, []);

  const items1 = [
    { fixedLabel: "Fixed Label 1", variableContent: props?.content1 },
    { fixedLabel: "Fixed Label 2", variableContent: props?.content2 },
  ];

  const items2 = [
    { fixedLabel: "Fixed Label 1", variableContent: dataIntegration?.content1 },
    { fixedLabel: "Fixed Label 2", variableContent: dataIntegration?.content2 },
  ]; 

  return (
     <div>
       <div>
         {items1.map((item1) => (
           <div key={item2.fixedLabel}>
             <div>
               {item1.variableContent}
             </div>
           </div>
          ))}
      </div>
      <div>
         {items2.map((item2) => (
           <div key={item2.fixedLabel}>
             <div>
               {item2.variableContent}
             </div>
           </div>
          ))}
      </div>
    </div>
  );
}
Tags:

2

Answers


  1. 0

    As per my experience, when working on big codebases it’s generally a good idea to put these arrays or any constant data in a constant file for ease of maintainability.

    Login or Signup to reply.
  2. 0

    You are correct in wanting to generalize these. Whenever you have code that is very repetitive – as the items1, items2, etc suggests – you should try to simplify.

    So instead of doing:

        const items1 = [
    { fixedLabel: "Fixed Label 1", variableContent: props?.content1 },
    { fixedLabel: "Fixed Label 2", variableContent: props?.content2 },
  ];

  const items2 = [
    { fixedLabel: "Fixed Label 1", variableContent: dataIntegration?.content1 },
    { fixedLabel: "Fixed Label 2", variableContent: dataIntegration?.content2 },
  ];

    It would be better maintainable and reusable like this:

    const item = (label, variabeleContent) => {
  return {
    label: label,
    content: variabeleContent,
    };
}

    From there, you can fill up array with items or call them manually.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search