ReactJs: Simple render table not working

Question

I am trying to render a table from data i get via an ajax call. Here is the code:

let tableResult = null;
let tableRows = null;

if(this.state.searchResult === 'records-found') {

  tableRows = this.state.transactionsData.content.map((item, index) => {
    let date = new Date(item.dateOfPayment);
    return (
      <tr key={item.id}>
        <td>{date}</td>
        <td>{item.transactionReference}</td>
        <td>{item.merchantCustomerId}</td>
        <td>{item.amount}</td>
        <td>{item.status}</td>
      </tr>
    );
  });

  tableResult = (
    <div className="transactions-table-wrapper">
      <div className="transactions-table">
        <table>
          <thead>
            <tr>
              <td>Date Of Payment</td>
              <td>Merchant Reference</td>
              <td>Customer Id</td>
              <td>Amount</td>
              <td>Status</td>
            </tr>
          </thead>
          <tbody>
            {tableRows}
          </tbody>
        </table>
      </div>
    </div>
  );
}

Then table gets rendered like so:

    <div className="transitions-search-result">
      {tableResult}
    </div>

The error I get is "Cannot read property 'content' of null" but I print the state before that line. The value is set

Where are you setting your state? (specifically transactionsData) — fmilani
– fmilani, Commented Jan 16, 2017 at 19:45
In an ajax call. When there is a response, I call "setState()". This calls the render function( I checked) and the data gets set properly(also checked). When i set a brakepoint and step through the code the line with the error gets executed — Gilbert Nwaiwu
– Gilbert Nwaiwu, Commented Jan 16, 2017 at 19:48
If i step i get this error: " Objects are not valid as a React child (found: Invalid Date). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of SubTransactions." — Gilbert Nwaiwu
– Gilbert Nwaiwu, Commented Jan 16, 2017 at 19:52
Well..ajax is async. React is probably calling your component's render function before your ajax request is done (meaning at that time your state isn't set the way you want). Do you have an initial state in your component (i.e.: do you set this.state = ... on your component's constructor) ? — fmilani
– fmilani, Commented Jan 16, 2017 at 19:55

Frank · Accepted Answer · 2017-01-16 20:19:11Z

2

Check your {date} statement. In your looping of the content collection, you set date = to a new javascript date. Then in the return, you set one td's value to that date.

React can not render a date object. You need to make it a string or valid react component.

tableRows = this.state.transactionsData.content.map((item, index) => {
    **let date = new Date(item.dateOfPayment);**
    return (
      <tr key={item.id}>
        **<td>{date.toString()}</td>**
        <td>{item.transactionReference}</td>
        <td>{item.merchantCustomerId}</td>
        <td>{item.amount}</td>
        <td>{item.status}</td>
      </tr>
    );
  });

all browsers should support date.toString.

And maybe better would be date.toDateString(). Depending if you want to format it our not.

edited Jan 16, 2017 at 20:19

answered Jan 16, 2017 at 20:12

Frank

2,2182 gold badges19 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gilbert Nwaiwu Over a year ago

Damn. Thanks a lot bro. Funny thing is there was no warning. The tableResult object was even looking like a react Object. But rendered null

Collectives™ on Stack Overflow

ReactJs: Simple render table not working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related