Display the initial MUI components from an array of data in a distinctive manner

Question

Display the initial MUI components from an array of data in a distinctive manner

Trying to display the content of an Accordion by passing props down through a list array to a component. I have identified the issue but unsure how to call the component and pass the props differently. Below is the code snippet.

Code for the parent component

const Sandbox = () => {

let summaryContents: any[] = [
    {
      Title: "Construction costs",
      TotalPrice: "$25000",
      Subcontents: [
        {
          Subtitle: "Sanitation",
          SubtitlePrice: "$5000",
        },
        {
          Subtitle: "PoolLights",
          SubtitlePrice: "$5000",
        },
        {
          Subtitle: "PoolCleaner",
          SubtitlePrice: "$15000",
        },
      ],
    },
    {
      Title: "Pool interior costs",
      TotalPrice: "$20000",
      Subcontents: [
        {
          Subtitle: "Title1",
          SubtitlePrice: "$5000",
        },
        {
          Subtitle: "Title2",
          SubtitlePrice: "$10000",
        },
        {
          Subtitle: "Title3",
          SubtitlePrice: "$5000",
        },
      ],
    },
];


  let summaryContentsList: any[] = [];

  summaryContents.forEach((item: any, index: number) => {
    summaryContentsList.push(
      <QuoteSummary
        
        Title={item.Title}
        TotalPrice={item.TotalPrice}
        Subtitle={item.Subcontents.Subtitle}
        SubtitlePrice={item.Subcontents.SubtitlePrice}
      />
    );
  });
  return (
    <>
      
      {summaryContentsList}
    </>
  );
};

Component code for the child component

const QuoteSummary: FC<QuoteSummaryProps> = (props: QuoteSummaryProps) => {
  const classes = useStyles();
  return (
    <QuoteCard>
      <Typography variant="h1" sx={{ paddingBottom: 2 }}>
        Quote Summary
      </Typography>
      <DialogCloseButton onClose={clicked} />

      <Accordion
        className={classes.accordion}
        sx={{
          paddingTop: 0,
        }}
      >
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel1a-content"
          id="panel1a-header"
        >
          <Typography variant="h3">{props.Title}</Typography>
          <Typography variant="h3" sx={{ paddingLeft: 10 }}>
            {props.TotalPrice}
          </Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>{props.Subtitle}</Typography>
          <Typography>{props.SubtitlePrice}</Typography>
        </AccordionDetails>
      </Accordion>
    </QuoteCard>
  );
};

https://i.stack.imgur.com/0zrN8.png

The current display shows the Title repeated multiple times within each accordion. The desired outcome is to render the Title once with its corresponding accordion contents below. What approach should be taken to achieve this?

reactjs typescript foreach material-ui accordion

Answer 1

Answer №1

To optimize your code, consider moving the QuoteCard component outside and only including the Accordion item inside the child component:

const QuoteSummary: FC<QuoteSummaryProps> = (props: QuoteSummaryProps) => {
  return (
    <Accordion>
      {...}
    </Accordion>
  );
};

<QuoteCard>
  <Typography variant="h6" sx={{ paddingBottom: 2 }}>
    Quote Summary
  </Typography>
  <DialogCloseButton onClose={() => {}} />

  {summaryContents.map((item) => (
    <QuoteSummary
      Title={item.Title}
      TotalPrice={item.TotalPrice}
      Subtitle={item.Subcontents.Subtitle}
      SubtitlePrice={item.Subcontents.SubtitlePrice}
    />
  ))}
</QuoteCard>

UPDATE: Another suggestion is to dynamically render the title in the child component based on the props passed down from the parent:

const QuoteSummary: FC<QuoteSummaryProps> = (props: QuoteSummaryProps) => {
  return (
    <QuoteCard>
      {props.displayTitle && (
        <Typography variant="h6" sx={{ paddingBottom: 2 }}>
          Quote Summary
        </Typography>
      )}
      <DialogCloseButton onClose={() => {}} />
      <Accordion>
        {...}
      </Accordion>
    </QuoteCard>
  );
};

<>
  {summaryContents.map((item, i) => (
    <QuoteSummary
      displayTitle={i === 0}
      Title={item.Title}
      TotalPrice={item.TotalPrice}
      Subtitle={item.Subcontents.Subtitle}
      SubtitlePrice={item.Subcontents.SubtitlePrice}
    />
  ))}
</>

https://codesandbox.io/s/69654195-avoid-few-elements-of-a-component-in-react-when-rendering-mui-accordion-through-mm975?file=/demo.tsx

Answer 2

To optimize your code, consider moving the QuoteCard component outside and only including the Accordion item inside the child component:

const QuoteSummary: FC<QuoteSummaryProps> = (props: QuoteSummaryProps) => {
  return (
    <Accordion>
      {...}
    </Accordion>
  );
};

<QuoteCard>
  <Typography variant="h6" sx={{ paddingBottom: 2 }}>
    Quote Summary
  </Typography>
  <DialogCloseButton onClose={() => {}} />

  {summaryContents.map((item) => (
    <QuoteSummary
      Title={item.Title}
      TotalPrice={item.TotalPrice}
      Subtitle={item.Subcontents.Subtitle}
      SubtitlePrice={item.Subcontents.SubtitlePrice}
    />
  ))}
</QuoteCard>

UPDATE: Another suggestion is to dynamically render the title in the child component based on the props passed down from the parent:

const QuoteSummary: FC<QuoteSummaryProps> = (props: QuoteSummaryProps) => {
  return (
    <QuoteCard>
      {props.displayTitle && (
        <Typography variant="h6" sx={{ paddingBottom: 2 }}>
          Quote Summary
        </Typography>
      )}
      <DialogCloseButton onClose={() => {}} />
      <Accordion>
        {...}
      </Accordion>
    </QuoteCard>
  );
};

<>
  {summaryContents.map((item, i) => (
    <QuoteSummary
      displayTitle={i === 0}
      Title={item.Title}
      TotalPrice={item.TotalPrice}
      Subtitle={item.Subcontents.Subtitle}
      SubtitlePrice={item.Subcontents.SubtitlePrice}
    />
  ))}
</>

https://codesandbox.io/s/69654195-avoid-few-elements-of-a-component-in-react-when-rendering-mui-accordion-through-mm975?file=/demo.tsx

Answer 3

Answer №2

If you want to display array items using a render function, you can do it like this:

const DisplayItems = () => {
  const itemArray: any[] = [
    {
      Name: "Item1",
      Price: "$10",
    },
    {
      Name: "Item2",
      Price: "$20",
    },
    {
      Name: "Item3",
      Price: "$30",
    },
  ];

  const renderItem = (item: any) => (
     <Item
        Name={item.Name}
        Price={item.Price}
      />
  );

  return (
    <>
      {itemArray.map(renderItem)}
    </>
  );
};

Answer 4

If you want to display array items using a render function, you can do it like this:

const DisplayItems = () => {
  const itemArray: any[] = [
    {
      Name: "Item1",
      Price: "$10",
    },
    {
      Name: "Item2",
      Price: "$20",
    },
    {
      Name: "Item3",
      Price: "$30",
    },
  ];

  const renderItem = (item: any) => (
     <Item
        Name={item.Name}
        Price={item.Price}
      />
  );

  return (
    <>
      {itemArray.map(renderItem)}
    </>
  );
};

Display the initial MUI components from an array of data in a distinctive manner

Answer №1

Answer №2

Similar questions

Tips for resolving the "Page Not Found" error in your NextJs application

React Error: The module 'common' could not be located

Creating a different type by utilizing an existing type for re-use

the <MapView/> component in react-native-maps cannot be displayed

Arrange the row information in the MUI DataGrid in order to prepare it for exporting to CSV or Excel

What is the best way to create a dynamic sitemap in Next.js version 14?

Customizing Material UI InputProps with HTML attributes: A step-by-step guide

What is the best way to distribute components with varying cell heights?

Encountering an issue while setting up a Next.js project, I am struggling to find a solution despite trying various methods

Manipulate classes by adding or removing them on click events in Angular

Error in NextJs: The text content does not align with the server-rendered content

developed a website utilizing ASP MVC in combination with Angular 2 framework

Verify if the array entries match

Execute JavaScript function on click event in NextJS

When using React hooks forms, setting default values from a reduced array does not automatically populate the form. However, manually entering the same object into the form does

Is there a way to prevent the arrow up and down events from functioning on the MUI Menu?

NextJS 13 - displaying a fully loaded page: tips and tricks

What is the correct way to utilize drei's useGLTF function?

Reactjs-ffsevents does not exist as a function

Implementing inline styles in the HEAD section of a Next.js website