Displaying an array of objects one screen from .json file

Question

First question here.

I have been learning JavaScript with React for a little fun and I started my own little project to work on where I attempt to read from a .json file and display the contents on the screen in little "Tweets." I've been stuck on a pretty simple looking problem. I cannot get the contents to be displayed when the contents are in an array like this though I was able to when it was only one item in the .json file. The items of each object print correctly in the console but nothing is displayed on the web page.

here is my App.js file. The first function is supposed to create a "tweet" and is called within the Render function. Like I said earlier it displayed correctly when I gave it one item deliberately (when the .json was not an array and merely one object with the attributes) while it does not display anything when given an array of posts. It does still show each item correctly in the console.logs.

import './App.css';
import PostInfo from './PostInfo.json';
import React, { Component } from "react";

class App extends Component{ 

    createTweet(post)
    {
        // remember to document meanings
        console.log(post.nameToken);
        console.log(post.content);
        console.log(post.likes);
        console.log(post.replies);

        return(
        <div>
            <h1>{post.nameToken}</h1>
            <h2>
                {post.content}
            </h2>
            <h3>Likes: {post.likes}</h3>
            <h3>Replies: {post.replies}</h3>
        </div>
        );        
    }
    
    render()
    {
        return(
            <div>
                <div>
                {
                    PostInfo.Posts.forEach(this.createTweet)
                }
                </div>
            </div>
        );
    }
}

and here is the .json file

{
    "Posts": 
    [
        {
            "nameToken": "MrMeowzas",
            "content": "Meow, I'm a kitty cat. A kitty cat, cat cat.",
            "likes": "5",
            "replies": "3"
        },
        {
            "nameToken": "Bellatrice",
            "content": "There is problem, I do wish I could tell you.",
            "likes": "8",
            "replies": "12"
        },
        {
            "nameToken": "JohnDoe",
            "content": "This is very boring.",
            "likes": "60",
            "replies": "23"
        }
    ]
}

Sorry if this is a bit rambly, I would appreciate any help! I am trying to learn JS through my own little projects instead of following copy pasting code tutorials because I find it helps me learn a lot more. It is how I learned C#. So if you can explain the processes behind what I am doing wrong and what the fix actually does that would be much appreciated. Thanks!

You need to use ```map``` function instead of ```forEach```. ForEach does not return anything, while map does return an array. https://stackoverflow.com/questions/34426458/javascript-difference-between-foreach-and-map — szczocik, Dec 17 '20 at 13:18
Does this answer your question? [React foreach in JSX](https://stackoverflow.com/questions/47616355/react-foreach-in-jsx) — goto, Dec 17 '20 at 13:23
@szczocik Aha I see! Thank you very much. I'll try using map instead, foreach was more familiar to me coming from C. — SquishyPon3, Dec 17 '20 at 13:35

score 0 · Answer 1 · answered Dec 17 '20 at 13:35

Hey SquishyPon3 how are you doing? Thanks for posting your question here and congrats for trying a new technology!

The only thing wrong with your code is that you are using a forEach loop to iterate over your posts. The forEach loop does not produce a new array with the JSX elements for the react renderer. Instead of using the forEach you should use the map. What map does is it transforms your array of posts into an array of React elements so the React renderer can interpret that and render the elements. For mor details about, I suggest you take a look right here on React documentation. You can also see an example sandbox I have created here.

As you are trying to learn without tutorials I suggest you to follow the React documentation because there you will find everything you need to learn it ok?

Take care!

That was exactly the issue, thanks for the reply and the links! I knew it was something simple. Sometimes it can be difficult to put into words an issue to search for it online so doing so here was very helpful. — SquishyPon3, Dec 17 '20 at 13:52
Your welcome! I just want to ask you to give an up vote on my solution please, so people who go through the same problem as you can see that the proposed solution worked. — Carlos Silva, Dec 17 '20 at 18:27

Displaying an array of objects one screen from .json file

1 Answers1