<table> dynamique ne rend pas les données

1
votes

dynamique ne rend pas les données

J'essaie de créer une table dynamique qui restitue les données insérées selon un format de

export default class StandardTable extends React.Component<Props, State>{
    constructor(props){
        super(props);

        this.state = {
            tableData: this.props.data
        }
    }

    render(){
        return(
            <div>
            <table id="StandardTable">
                <tbody>
                {this.state.tableData.headers.map(function(header){
                    <th>{header}</th>
                })}
                </tbody>
                <tbody>
                {this.state.tableData.rows.map(function(row){
                    <tr>
                        {row.map(function(rowItem){
                            <td>{rowItem}</td>
                        })}
                    </tr>

                })}
                </tbody>
            </table>
                <style jsx>
                    {`
                    #StandardTable{
                        border: 1px solid black;
                    }`}
                </style>
            </div>
        );
    }




}

Les lignes sont juste un tableau de tableaux et chaque tableau est une ligne dans le tableau.

/ p>

Je passe ces données dans un composant React qui rend la table. Le code est le suivant:

{headers: ["header1", "header2"], rows: [["data1", "data2"], ["moredata", "wowoso muchdata"]]}

Je suis capable de consigner l'objet de données et toutes les données sont là. Il itère également à travers les données dans les fonctions de carte car je peux vérifier dans la console, mais malheureusement, le tableau apparaît vide dans la pratique.

reactjs html jsx

0 commentaires

3 Réponses :

1
votes

Il n'y a pas de return dans map

this.state.tableData.rows.map(function(row){
                   return( <tr>
                        {row.map(function(rowItem){
                           return <td>{rowItem}</td>
                        })}
                    </tr>)

                })

0 commentaires

2
votes

pouvez-vous essayer ceci, pas besoin de revenir, vous pouvez utiliser la fonction flèche

        <table id="StandardTable">
            <tbody>
            {this.state.tableData.headers.map((header) => (
                <th>{header}</th>
            ))}
            </tbody>
            <tbody>
            {this.state.tableData.rows.map((row)=>(
                <tr>
                    {row.map((rowItem)=>(
                        <td>{rowItem}</td>
                    ))}
                </tr>

            ))}
            </tbody>
        </table>

J'espère que cela fonctionnera.

1 commentaires

Ce n'est pas la première solution viable, mais en fait la meilleure, car l'utilisation des fonctions fléchées est une meilleure pratique que de lancer des retours. Merci!

1
votes

C'est parce que vous avez oublié le retour . Faites ceci dans vos fonctions de carte:

            {this.state.tableData.headers.map(function(header){
                return <th>{header}</th>
            })}

0 commentaires