Acceder a un objeto JSON anidado para leer en una tabla en React [cerrado]

Tengo un objeto JSON que estoy tratando de analizar en una tabla usando React, sin embargo, tengo problemas .map()para intentar crear una fila para cada combinación única de código de curso, name, transferable_credits, transferable_credits -> institution, transferable_credits -> namey url. Parece que no puedo entender cómo obtener los valores clave de las matrices anidadas dentro de cada par clave-valor raíz JSON.

Mi componente React hasta ahora:

import data from './data.json'

const Home = () => {

    return ( 
        <div className="home">
            <table>
                <thead>
                    <tr>
                        <th>Course Code</th>
                        <th>Vendor Institution</th>
                        <th>Vendor Course</th>
                    </tr>
                </thead>
            <tbody>
                {Object.keys(data).map(function(key, index) {
                    return (
                        <tr key={index}>
                            <td>{key}</td>
                            {Object.keys(data[key].transferable_credits).forEach(function(key2) {
                                return (
                                    <td>{key2.institution}</td>
                                )
                            })}
                        </tr>
                    )})

                }
            </tbody>
            </table>
        </div>

     );
}
 
export default Home;
Answer

data[key].transferable_credits es una lista, por lo que debe hacer un bucle usando map, no Object.keys. Prueba esto

import data from './data.json'

const Home = () => {

    return ( 
        <div className="home">
            <table>
                <thead>
                    <tr>
                        <th>Course Code</th>
                        <th>Vendor Institution</th>
                        <th>Vendor Course</th>
                    </tr>
                </thead>
            <tbody>
                {Object.keys(data).map(function(key, index) {
                    return (
                        <tr key={index}>
                            <td>{key}</td>
                            {data[key].transferable_credits.map(function(key2) {
                                return (
                                    <td>{key2.institution}</td>
                                )
                            })}
                        </tr>
                    )})

                }
            </tbody>
            </table>
        </div>

     );
}
 
export default Home;