how can i return map inside map-CodePudding

I am trying to render the data I received from my json data with the code I wrote. my all code:

import * as React from "react";
import PropTypes from "prop-types";
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";
import styled from "styled-components";

export default function VerticalTabs({ conditions }) {
  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <Box
      sx={{
        flexGrow: 1,
        bgcolor: "background.paper",
        display: "flex",
        height: 224,
      }}
    >
      <Tabs
        orientation="vertical"
        variant="scrollable"
        value={value}
        onChange={handleChange}
        aria-label="Vertical tabs example"
        sx={{ borderRight: 1, borderColor: "divider" }}
      >
        <Tab label="Account" {...a11yProps(0)} />
        <Tab label="Sertifikalar" {...a11yProps(1)} />
      </Tabs>
      {conditions.map((condition, i) => {
        {
          condition.id === 1 && 
            return (
              <TabPanel value={value} index={0}>
                <h1>{condition.conditionName}</h1>
                {condition.sub_conditions.map((sub, ind) => {
                  <Title>
                    {sub.header}
                    {console.log(sub, "try")}
                  </Title>;
                })}
              </TabPanel>
            );
          }
        }
        {
            condition.id === 2 &&
              return (
                <TabPanel value={value} index={1}>
                  <h1>{condition.conditionName}</h1>
                  {condition.sub_conditions.map((sub, ind) => {
                    <Title>
                     {sub.header}
                      {console.log(sub, "try")}
                    </Title>;
                  })}
                </TabPanel>
              );
            
          
      })}

    </Box>
  );
}

Here is the part of the code that I can't do:

{conditions.map((condition, i) => {
            {
              condition.id === 1 && 
                return (
                  <TabPanel value={value} index={0}>
                    <h1>{condition.conditionName}</h1>
                    {condition.sub_conditions.map((sub, ind) => {
                      <Title>
                        {sub.header}
                        {console.log(sub, "try")}
                      </Title>;
                    })}
                  </TabPanel>
                );
              }
            }
            {
                condition.id === 2 &&
                  return (
                    <TabPanel value={value} index={1}>
                      <h1>{condition.conditionName}</h1>
                      {condition.sub_conditions.map((sub, ind) => {
                        <Title>
                         {sub.header}
                          {console.log(sub, "try")}
                        </Title>;
                      })}
                    </TabPanel>
                  );
                
              
          })}

My h1 tag is written to the screen, but my Title tag is not written to the screen. I couldn't figure out how to solve this. Obviously, I don't know where I made a mistake, because there are no errors reflected on the console, but I can't press the screen.

CodePudding user response：

In JavaScript:

xs.map(x => { f(x) });

…will return an array of undefineds!

When you have x => { … }, the contents of the block are treated as a function body. This means you must have a return expression in the block for it to return a value, e.g.

xs.map(x => { return f(x) });

You could also write:

xs.map(x => f(x));

…with no braces, however, this is only possible if the right-hand side of the arrow consists of a single statement.

Another thing to point out is that in the outermost map, you need to reenter the JSX context to sequence the two TabPanel elements together. You can do this using the fragment syntax.

Looking carefully through your code, it also looks like you might have a misplaced brace. I have reindented your code snippet and fixed this.

Using blocks and returns:

{
  conditions.map((condition, i) => {
    return <>{
      condition.id === 1 && (
        <TabPanel value={value} index={0} key={i}>
          <h1>{condition.conditionName}</h1>
          {condition.sub_conditions.map((sub, ind) => {
            return (<Title key={ind}>
              {sub.header}
              {console.log(sub, "try")}
            </Title>);
          })}
        </TabPanel>
      )
    }
    {
      condition.id === 2 && (
        <TabPanel value={value} index={1} key={i}>
          <h1>{condition.conditionName}</h1>
          {condition.sub_conditions.map((sub, ind) => {
            return (<Title key={ind}>
              {sub.header}
              {console.log(sub, "try")}
            </Title>);
          })}
        </TabPanel>
      )
    }</>
  })
}

Using implicit returns:

{
  conditions.map((condition, i) =>
    <>{
      condition.id === 1 && (
        <TabPanel value={value} index={0} key={i}>
          <h1>{condition.conditionName}</h1>
          {condition.sub_conditions.map((sub, ind) =>
            (<Title key={ind}>
              {sub.header}
              {console.log(sub, "try")}
            </Title>)
          )}
        </TabPanel>
      )
    }
    {
      condition.id === 2 && (
        <TabPanel value={value} index={1} key={i}>
          <h1>{condition.conditionName}</h1>
          {condition.sub_conditions.map((sub, ind) =>
            (<Title key={ind}>
              {sub.header}
              {console.log(sub, "try")}
            </Title>)
          )}
        </TabPanel>
      )
    }</>
  )
}

EDIT:

When producing elements from a map, we need to add a key to them so React can uniquely identify them when reloading. Typically, the index suffices for this purpose. I have edited my code accordingly.

CodePudding user response：

You should have return the component from the map function to render that sorry for the bad code indentation but i think this should work for you

  {conditions.map((condition, i) => {
    
       if(condition.id==1){
        return (
          <TabPanel value={value} index={0}>
            <h1>{condition.conditionName}</h1>
            {condition.sub_conditions.map((sub, ind) => {
              return(<Title>
                {sub.header}
                {console.log(sub, "try")}
              </Title>);
            })}
          </TabPanel>
        );
       }
       if(condition.id==2){
        return (
          <TabPanel value={value} index={1}>
            <h1>{condition.conditionName}</h1>
            {condition.sub_conditions.map((sub, ind) => {
              return(<Title>
               {sub.header}
                {console.log(sub, "try")}
              </Title>);
            })}
          </TabPanel>
        );
       }
            })
      
            }