CODEWITHSUNDEEP
javascripttwitter-bootstrapreactjsmobx
AConsumer
AConsumer

Reputation: 2781

Javascript + React :- Unable to put the data in table and then render it

import React from 'react';
import { observer } from "mobx-react"
import { inject } from "mobx-react"

@observer
export default class TradeTable extends React.Component {


	render() {

		
		var tableData = this.props.store.arr.map((data) => {
			console.log("The data is "+typeof data)         //The data is Object
			console.log(data.date)
			return data
		})

		console.log(tableData)  // Data is available in object form
		return <div className="panel panel-default">
			<div className="panel-body tradeComponent div-background table-responsive">
				<table className="table table-striped tb div-lightbackground">
					<thead className="thead-dark ">
						<tr>
							<th>Commodity</th>
							<th>Date</th>
							<th>Side</th>
							<th>Qty (MT)</th>
							<th>Price (MT)</th>
							<th>CounterParty</th>
							<th>Location</th>
							<th></th>
						</tr>
					</thead>
					<tbody>
						<tr>

							<td>{tableData.date}</td>         //Not working
							<td>{tableData.commodity}</td>
							<td>{tableData.side}</td>
							<td>{tableData.quantity}</td>
							<td>{tableData.price}</td>
							<td>{tableData.counterparty}</td>
							<td>{tableData.location}</td>
						</tr>

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

I am not able to view the table .I am not getting errors .I am able to view the data whenever i console log it , but i am not able to view the data inside the table.Urgent help needed ..i am trying for hours :(

Upvotes: 1

Views: 58

Answers (1)

jstuartmilne
jstuartmilne

Reputation: 4488

Seems to me tableData is an array. what you are looking for is something like this

export default class TradeTable extends React.Component {


    render() {

        return (<div className="panel panel-default">
            <div className="panel-body tradeComponent div-background table-responsive">
                <table className="table table-striped tb div-lightbackground">
                    <thead className="thead-dark ">
                        <tr>
                            <th>Commodity</th>
                            <th>Date</th>
                            <th>Side</th>
                            <th>Qty (MT)</th>
                            <th>Price (MT)</th>
                            <th>CounterParty</th>
                            <th>Location</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                         {
       this.props.store.arr.map((tableItem, i) => (
        <tr key={i}>
          <td>{tableItem.date}</td>
          <td>{tableItem.commodity}</td>
          <td>{tableItem.side}</td>
          <td>{tableItem.quantity}</td>
          <td>{tableItem.price}</td>
          <td>{tableItem.counterparty}</td>
          <td>{tableItem.location}</td>
        </tr>))}

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

Note that using the i (index) as the key is bad practice. so consider using an unique attribute for your key hope it helps

Upvotes: 2

Related Questions