ReactJS MUI Component not rendering inside map function

Question

I am using ReactJS along with Material UI Components. I am trying to render a custom element using the below code. The options array is never empty and the console logs are showing as expected - "Adding element to grid ..". However, the element is not rendered on the browser(I checked the browser Inspector to confirm).

What am I missing?

import React from "react";
import Container from "@mui/material/Container";
import Grid from "@mui/material/Grid";
const Element = (props) => {
  const {options} = props;
  
  return(
     // If I simply pass a JSX component at this location, it renders fine. 
     // But not inside the map function
     {options.map((opt) => {
        opt.elements.length > 0 && (
          <Grid container spacing={4}>
            {opt.elements.map((el) => (
              <Grid item xs={12} sm={6}>
                {console.log("Adding element to grid ..", el.element_name)}
                <h1>{el.element_name}</h1>
              </Grid>
            ))}
          </Grid>
        );
      })} 
  )
}

Sean · Accepted Answer · 2022-05-03 19:59:48Z

2

You should use parentheses instead of curly brackets inside the first map in the return()

{options.map((opt) => (
        opt.elements.length > 0 && (
          <Grid container spacing={4}>
            {opt.elements.map((el) => (
              <Grid item xs={12} sm={6}>
                {console.log("Adding element to grid ..", el.element_name)}
                <h1>{el.element_name}</h1>
              </Grid>
            ))}
          </Grid>
        );
      ))}

answered May 3, 2022 at 19:59

Sean

1,4763 gold badges13 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Qedrix Over a year ago

This was a life saver! Thanks :)

Collectives™ on Stack Overflow

ReactJS MUI Component not rendering inside map function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related