Skip to content
Advertisement

Why cant i use a function to fill a table in REACTJS

I wrote a function in REACTJS that helps me to read a JSON-File and to display the content of the JSON-File. When I use the code of the function inside of a body the display of the content works fine. But now i want to use the function to fill a table with the content of the JSON and it wont work – the page stays empty. Thank you in advance!

The Function:

function FillData() {
    <div className="App">
                {
                    Data.map( datan => {
                        return(
                            <div className="box">
                            
                                {datan.personalActivationWord}
                                
                            </div>
                        )
                    } )
                }
    </div>
} 

Trying to use it to fill a table (Tabledata for Setting1):

function Table() {
    return (
        <div className={navto.table}>
                <div className={navto.header}>HMI</div>
                <FillData />
                <table className>
                        <tr>
                            <th>Setting</th>
                            <th>Wert</th>
                            <th>Status</th>
                        </tr>
                        <tr>
                            <td>Setting1</td>
                            <td><FillData /></td>
                            <td>Aktualisiert vor 3 Sek.</td>
                        </tr>
                        <tr>
                            <td>Setting2</td>
                            <td>AKTIV</td>
                            <td>Aktualisiert vor 3 Sek.</td>
                        </tr>
                        <tr>
                            <td>Setting3</td>
                            <td>AKTIV</td>
                            <td>Aktualisiert vor 3 Sek.</td>
                        </tr>
                </table>
            </div>
    )
}

Advertisement

Answer

You are not returning anything in your FillData function.

function FillData() {
    return <div className="App">
                {
                    Data.map( datan => {
                        return(
                            <div className="box">
                            
                                {datan.personalActivationWord}
                                
                            </div>
                        )
                    } )
                }
    </div>
} 
User contributions licensed under: CC BY-SA
1 People found this is helpful
Advertisement