Object.keys - Expected an assignment or function call and instead saw an expression no-unused-expressions

Question

Creating a html table using multiple javascript methods in ReactJS. Object.keys is used to pull the data from objects. Having an issue with rendering the thead th's and tbody tr and td's without getting message, 'Expected an assignment or function call and instead saw an expression no-unused-expressions'.

import React from 'react';

const CreateTable = ({ results }) => {

    //headers should be based on keys
    const CreateHeaders = () => {
        return (
            <thead>
                <tr>
                    {Object.keys(results.header).forEach(function(column){
                        // console.log(column);
                        <td>
                            {column}
                        </td>
                    })}
                </tr>
            </thead>
        )
    }

    const CreateBody = ( ) => {
        return (
            <tbody>
                {Object.keys(results.data).forEach(function(tr){
                    // console.log(results.data[tr])
                   <tr>
                       {CreateRows(results.data[tr])}
                  </tr> 
                })}
            </tbody>
        )
    }

    const CreateRows = (tr) => {
        return(
        Object.keys(tr).forEach(function(td){
            console.log(tr[td]);
            <td>{tr[td]}</td>
        }));
    }

    if( results.data !== null && results.data !== undefined){
        console.log(<table>{CreateHeaders()}{CreateBody()}</table>);
        return <table>{CreateHeaders()}{CreateBody()}</table>
    }
    else {
        return (null);
    }


}

export { CreateTable }

I expect a table to render but instead i receive a message stating,

Line 12: Expected an assignment or function call and instead saw an expression no-unused-expressions Line 26: Expected an assignment or function call and instead saw an expression no-unused-expressions Line 38: Expected an assignment or function call and instead saw an expression no-unused-expressions

I could set a return inside the object.keys function but when i do nothing is rendered but the skeleton of the table. IE

<table><thead></thead><tbody></tbody></table>

Console.log output from if statement towards the bottom of code shown above

{$$typeof: Symbol(react.element), type: "table", key: null, ref: null, props: {…}, …}
$$typeof: Symbol(react.element)
key: null
props:
children: Array(2)
0:
$$typeof: Symbol(react.element)
key: null
props:
children:
$$typeof: Symbol(react.element)
key: null
props: {children: undefined}
ref: null
type: "tr"
_owner: FiberNode {tag: 0, key: null, elementType: ƒ, type: ƒ, stateNode: null, …}
_store: {validated: true}
_self: null
_source: {fileName: "...\src\components\table.js", lineNumber: 10}
__proto__: Object
__proto__: Object
ref: null
type: "thead"
_owner: FiberNode {tag: 0, key: null, elementType: ƒ, type: ƒ, stateNode: null, …}
_store: {validated: true}
_self: null
_source: {fileName: "...\src\components\table.js", lineNumber: 9}
__proto__: Object
1:
$$typeof: Symbol(react.element)
key: null
props: {children: undefined}
ref: null
type: "tbody"
_owner: FiberNode {tag: 0, key: null, elementType: ƒ, type: ƒ, stateNode: null, …}
_store: {validated: true}
_self: null
_source: {fileName: "...\src\components\table.js", lineNumber: 24}
__proto__: Object
length: 2
__proto__: Array(0)
__proto__: Object
ref: null
type: "table"

Answer 1

You're using forEach which has no return value. You're looking for map instead.

<tr>
    {Object.keys(results.header).map(column => (
        // console.log(column);
        <td>
            {column}
        </td>
    ))}
</tr>

And return the result of map from CreateRows

const CreateRows = (tr) => {
    return(
    Object.keys(tr).map(td =>
        <td>{tr[td]}</td>
    ));
}