React TableCell is not getting filled inside of nested loop

Question

I have the following code. I am also console logging and the console is outputting values for every single piece of content. For some reason my Table.Cell's do not get filled up at all. I believe it is because I have a double nested loop.

const CustomToggle = ({ element}) => (

    <Table>
        <Table.Header>
        <Table.Row>
            <Table.HeaderCell>Movies</Table.HeaderCell>
        </Table.Row>
        {Object.keys(element).map(function(dataType) {
            {if (dataType !== "lid" && dataType !== "datacenter")
                {Object.keys(element[dataType]).map(function(data){
                    console.log(element[dataType][data][0])
                    return (<Table.Row>

                        <Table.Cell>{element[dataType][data][0]}</Table.Cell>
                        </Table.Row>
                        )
                    })
                }
            }

    })}
        </Table.Header>
</Table>

);

Any idea how I can do this with a double nested loop? The table cells seems to get filled when I just do one loop. I am also getting the following warnings in react:

Nested block is redundant
Expected to return a value in function

Answer 1

You don't need two { here. That might be considered as no return or the return value goes nowhere. Also, indentation helps in these situations. Just replace it with the following:

const CustomToggle = ({ element }) => (
  <Table>
    <Table.Header>
      <Table.Row>
        <Table.HeaderCell>Movies</Table.HeaderCell>
      </Table.Row>
      {Object.keys(element).map(function (dataType) {
        if (dataType !== "lid" && dataType !== "datacenter") {
          Object.keys(element[dataType]).map(function (data) {
            console.log(element[dataType][data][0]);
            return (
              <Table.Row>
                <Table.Cell>{element[dataType][data][0]}</Table.Cell>
              </Table.Row>
            );
          });
        }
        return null;
      })}
    </Table.Header>
  </Table>
);

Answer 2

Try this.

<Table>
        <Table.Header>
        <Table.Row>
            <Table.HeaderCell>Movies</Table.HeaderCell>
        </Table.Row>
        {Object.keys(element).map(function(dataType) {
            {if (dataType !== "lid" && dataType !== "datacenter")
                return Object.keys(element[dataType]).map(function(data){
                    console.log(element[dataType][data][0])
                    return (<Table.Row>

                        <Table.Cell>{element[dataType][data][0]}</Table.Cell>
                        </Table.Row>
                        )
                    })

            }else
              return <></>

    })}
        </Table.Header>
</Table>