0

I am using ReactJS to display a table. The rows of this table are fetched from the database. I can get only row to show but adding an additional {object.title} returns an error that object is not defined. Here is my code:

tabRow(){
        if(this.state.products instanceof Array){
            const roles = this.state.products.map((object, i) =>
                <td>{object.id}</td>,
                <td>{object.title}</td>
            );
            return (
              <tr>{roles}</tr>
            );

        }
    }


    render(){
        return (
            <div>
                <h1>Products</h1>


                <div className="row">
                    <div className="col-md-10"></div>
                    <div className="col-md-2">
                        <Link to="/add-item">Create Product</Link>
                    </div>
                </div><br />


                <table className="table table-hover">
                    <thead>
                    <tr>
                        <td>ID</td>
                        <td>Product Title</td>
                        <td>Product Body</td>
                        <td width="200px">Actions</td>
                    </tr>
                    </thead>
                    <tbody>
                        {this.tabRow()}
                        {console.log(this.tabRow())}
                    </tbody>
                </table>
            </div>
        )
    }
shekwo
  • 1,411
  • 1
  • 20
  • 50
  • What does your data look like? Can you add an example to the question? – Andy Feb 21 '18 at 17:31
  • you are trying to return two elements, so either put them inside an array or wrap them by `React.Fragment`, [**check this answer**](https://stackoverflow.com/questions/48886726/react-expressions-must-have-one-parent-element/48886826#48886826) for more details. – Mayank Shukla Feb 21 '18 at 17:34
  • Trying to iterate tr or td? you have given map of products and returning tds – G_S Feb 21 '18 at 17:41

0 Answers0