Menu
I'm trying to render out journal entries on my site with an object (not array) and I am running into an issue, here is my current code
populateJournal(){ const j = Object.values(this.state.journal); var journalEntries = ''; for (var i = 0; i < j.length; i++){ journalEntries+= <div> <h3>{j[i].title} - {j[i].date}</h3> <p>{j[i].entry}</p> </div>; } return(<div>{journalEntries}</div>); }
When i call this function it renders "<div>[object object]</div>" and the text between the divs is plain text.
When i change the loop to say "journalEntries = <div...." it renders out the last journal entry as expected, but the issue is that it's not actually appending the journal entries with the loop.
ideas?
357
JSX is just a syntax extension of JavaScript which allows users to write React components; React is an open source frontend JavaScript library for building complex UIs; it allows the programmers to create complex UIs from smaller components.
React, ES6, JavaScript, EJS, and Python are the most popular alternatives and competitors to JSX.
React renders HTML to the web page by using a function called render(). The purpose of the function is to display the specified HTML code inside the specified HTML element. In the render() method, we can read props and state and return our JSX code to the root component of our app.
JSX is not a requirement for using React. Using React without JSX is especially convenient when you don't want to set up compilation in your build environment. Each JSX element is just syntactic sugar for calling React.
Rendering Elements. Elements are the smallest building blocks of React apps. An element describes what you want to see on the screen: const element = <h1>Hello, world</h1>; Unlike browser DOM elements, React elements are plain objects, and are cheap to create. React DOM takes care of updating the DOM to match the React elements. Note:
If you’re new to React, you’ll likely have heard about JSX, or JavaScript XML — it’s an XML-like code for elements and components. In this article, we’re going to take a look at what JSX is & why we should use it in our React applications. We’ll also take a look at what elements are, and how we can render them to the DOM.
This object is known as a React element, and it functions a lot like a description of what you see on the screen. React uses these objects to build the DOM and keep it up to date.
Let’s embed the result of a called JavaScript function: Hello, {printName (user)}! So whats actually going on with JSX, when we render components? Each element being rendered by the Greeting component are transpiled down into React.createElement calls.
Inspead of a defining journalEntries as a string define it as an array and push the JSX elements to the array in order to render like
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: Data Display and Array manipulation
161
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
