React is rendering [object object] rather than the JSX

Instead of a defining journalEntries as a string define it as an array and push the JSX elements to the array in order to render, for example:

populateJournal() {
  const j = Object.values(this.state.journal);
  var journalEntries = [];
  for (var i = 0; i < j.length; i++) {
    journalEntries.push(
      <div>
        <h3>{j[i].title} - {j[i].date}</h3>
        <p>{j[i].entry}</p>
      </div>
    );
  }
     
  return (<div>{journalEntries}</div>);
}

When you append to the string, you are not actually appending a string but an object which is incorrect and hence you get [object Object]

You can also use map to render your context. See this answer on how to use map:

REACT JS: Map over an array of objects to render in JSX

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)