Errors Unhandled Rejection & Objects are not valid as a React child

Technical Issue Reporting
#21

HI @nadtn,

It looks like you are not even using Moralis hooks anyway.

Please check out the hooks section to see how to use them. Hooks start with the key word “use”.

#22

If you have a promise, you could still get its result using something like

resultDateTransaction.then(
    function(value) {console.log(value);},
    function(error) {console.log(error);}
  );

When in react, sometimes you could use console.log(JSON.stringify(object_)) so that you can see what is there instead of [object Object]

#23

Thanks guys, Moralis hooks are so useful and it’s easier when can check the value of [object Object].
Hope this is correct, I just can’t see the content in tbody but thead and everything else is there.

Capture d’écran 2021-09-30 à 12.42.33
Capture d’écran 2021-09-30 à 12.42.331162×476 52.6 KB

I only have Transactions.jsx now

import pageflip from "../data/pageflip.mp3";

import { Typography } from "@material-ui/core";

import { Moralis } from "moralis";

import { useMoralisQuery } from "react-moralis";


function millisecondsToTime (ms) {
    let minutes = Math.floor(ms / (1000 * 60));
    let hours = Math.floor(ms / (1000 * 60 * 60));
    let days = Math.floor(ms / (1000 * 60 * 60 * 24));
    
    if (days < 1) {
        if (hours < 1) {
            if (minutes < 1) {
                return `less than a minute ago`
            } else return `${minutes} minutes(s) ago`
        } else return `${hours} hours(s) ago`
    } else return `${days} days(s) ago`
  }

  const pageflipAudio = new Audio(pageflip);
  const playSound = audioFile => {
    audioFile.play();
}


export default function Transactions ({date}) {

    playSound(pageflipAudio);

        // set lessThan date
        let nextDate = new Date(date);
        nextDate.setDate(nextDate.getDate()+1);
              
        const { data, error, isLoading } = useMoralisQuery("EthTransactions", query =>
        query
          .greaterThan("block_timestamp", date)
          .lessThan("block_timestamp", nextDate),
          [date],
      );
      
    //console.log("Transactions json: " + JSON.stringify(data, null, 2))
    
    if (!error & data.length > 0) {

    return (
      <table border = "1" bordercolor = "blue">
      <caption>{data.length} transaction(s) {date.toLocaleDateString()}</caption>
      <thead>
      <tr>
      <th scope="col">Transaction</th>
      <th scope="col">Block Number</th>
      <th scope="col">Age</th>
      <th scope="col">Type</th>
      <th scope="col">Fee</th>
      <th scope="col">Value</th>
      <th scope="col">Notes</th>
          </tr>
      </thead>
      <tbody>
      {data.forEach((t) => {
          console.log("hash" + t.attributes.hash)
          return(
    <tr>
        <td><a href='https://etherscan.io/tx/${t.attributes.hash}' target="_blank" rel="noopener noreferrer">{t.attributes.hash}</a></td>
        <td><a href='https://etherscan.io/block/${t.attributes.block_number}' target="_blank" rel="noopener noreferrer">{t.attributes.block_number}</a></td>
        <td>{millisecondsToTime(Date.parse(new Date()) - Date.parse(t.attributes.block_timestamp))}</td>
        <td>{t.attributes.from_address == Moralis.User.current().get('ethAddress') ? 'Outgoing' : 'Incoming'}</td>
        <td>{((t.attributes.gas * t.attributes.gas_price) / 1e18).toFixed(5)} ETH</td>
        <td>{(t.attributes.value / 1e18).toFixed(5)} ETH</td>
        <td><input type="text" id="name" name="name"></input><button>Save</button></td>
    </tr>
      ); })}
      </tbody>
      </table>
    );

}
else {
    return (<Typography>No transactions</Typography>);
}
}
#24

does this console.log show what you expect?

#25

It does!
hash0xa37fe8cf2a6c655a532e301634ab7cf771007f1b8cd4ec2703fb73785a1e7ca8
But what’s also weird is that we have 2 transactions and in the log it’s displayed twice.

Capture d’écran 2021-09-30 à 12.51.54
Capture d’écran 2021-09-30 à 12.51.541088×276 76.3 KB

#27

Solved! New issue is already on a new topic

1 Like
#28