react js iterating through an object in jsx

Question

This code in React.js need to show a simple table with cells filled by data from db.json, but the only thing I see is a blank page, I tried to console.log(cell) inside the td and the correct information was logged but yet nothing was shown on the screen.

Sheet.js

import React from 'react'

function Sheet() {
    const data = require('../store/db.json')
    const mySheet = data.sheet1

    return (
        <>
            <table>
                <tbody>
                    {
                        Object.entries(mySheet).forEach(([row, cols]) => (
                            <tr key={row}>
                                {
                                    Object.entries(cols).forEach(([col, cell]) => (
                                        <td key={`${row},${col}`}>
                                            {cell}
                                        </td>
                                    ))
                                }
                            </tr>
                        ))
                    }
                </tbody>
            </table>
        </>
    )
}

export default Sheet

db.json

{
    "sheet1": {
        "1": {
            "1": "1,1",
            "2": "1,2",
            "3": "1,3"
        },
        "2": {
            "1": "2,1",
            "2": "2,2",
            "3": "2,3"
        },
        "3": {
            "1": "3,1",
            "2": "3,2",
            "3": "3,3"
        }
    }
}

wkrueger · Accepted Answer · 2021-09-30 21:22:47Z

2

The .forEach JS array method always returns undefined.

console.log([1, 2, 3].forEach(x => x * 2)) // -> undefined

If you want to return another array from a source array, use .map

console.log([1, 2, 3].map(x => x * 2)) // [2, 4, 6]

answered Sep 30, 2021 at 21:22

wkrueger

1,39112 silver badges23 bronze badges

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

Collectives™ on Stack Overflow

react js iterating through an object in jsx

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related