Using Map Function with json Array (React)

Question

Some background of what I am attempting to do is that, my backend /content route returns an array with id data in it such as:

[12345,534543534,543543534,5435345435]

I am getting the array just fine and can see it in the browser when I console.log from the React component.

My question is this, I am trying to now map that date to a tag in the code. Here is the code:


import React, { useEffect, useState } from "react";

const Content = () => {
    useEffect(() => {
        async function getYouTubeList() {
            try {
                let url = "/api/content/";
                let res = await fetch(url);
                let data = await res.json();
                return data;

                // console.log(data);
            } catch (err) {
                console.error(err);
            }
        }
        getYouTubeList();
    }, [data]);

    // const [data, setMyArray] = useState([]);

    return (
        <div>
            <section className="content-landing">
                <div className="dark-overlay">
                    <div className="content-landing-inner">
                        <h1>Content Archive</h1>
                        <p>
                            Enjoy some of my curated content from various
                            sources
                        </p>
                        <p>
                            <li>
                                <iframe
                                    width="560"
                                    height="315"
                                    src="https://www.youtube.com/embed/MAPTHEIDHERE"
                                    title="YouTube video player"
                                    frameborder="0"
                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                    allowfullscreen
                                ></iframe>
                            </li>
                        </p>
                    </div>
                </div>
            </section>
        </div>
    );
};

export default Content;

I am trying to map the "data" array that I return from the async function above the "return" portion into the tag where it says "MAPTHEIDHERE". I am not sure how to use the map function in this context and could use some references or help! Thank you all in advance!

LMulvey · Accepted Answer · 2021-04-19 17:26:51Z

1

The React Docs are a great resource for stuff like this. Regardless, you would map over it in the same way you would normally map over an array. The key difference is that you would return JSX from each iteration and write it as a JSX expression:

import React, { useEffect, useState } from 'react';

const Content = () => {
  const [data, setMyArray] = useState([]);

  useEffect(() => {
    async function getYouTubeList() {
      try {
        let url = '/api/content/';
        let res = await fetch(url);
        let data = await res.json();
        setMyArray(data);
      } catch (err) {
        console.error(err);
      }
    }
    getYouTubeList();
  }, []);

  return (
    <div>
      <section className="content-landing">
        <div className="dark-overlay">
          <div className="content-landing-inner">
            <h1>Content Archive</h1>
            <p>Enjoy some of my curated content from various sources</p>
            <p>
              {data.map((videoId) => (
                <li>
                  <iframe
                    width="560"
                    height="315"
                    src={`https://www.youtube.com/embed/${videoId}`}
                    title="YouTube video player"
                    frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen
                  ></iframe>
                </li>
              ))}
            </p>
          </div>
        </div>
      </section>
    </div>
  );
};

export default Content;

This will output one li element with the videoId added to the end of the src attribute for each one. The syntax takes some getting used to but, again, the React docs are a great resource to reference.

edited Apr 19, 2021 at 17:26

answered Apr 19, 2021 at 15:35

LMulvey

1,67810 silver badges14 bronze badges

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

6 Comments

aroe Over a year ago

Ok, this was absolutely perfect and I really appreciate it. Aside from one thing, it's telling me that "data is not defined" which I'm not sure why.

LMulvey Over a year ago

In your useEffect, you need to set the data to state instead of returning it. Change return data; to setMyArray(data) - assuming that data in that context is the exact array you want!

LMulvey Over a year ago

Oh, and also, uncomment the line where you're defining your useState for the data variable!

aroe Over a year ago

again, I really appreciate the help I'm learning a ton here. In my try{} block you want me to set state such as this ``` const data = useState([]); ``` and it should be good to go?

aroe Over a year ago

so all I did differently was I took data out of the array returned by the async getYouTubeList function and it worked perfectly!!! Thank you so much this was awesome I've been working on this for some time. One question I have is why do I have to use the setMyArray paart in the Try block since I don't use it in the return statement and also how do I declare that out of nowhere

|

JeromeBu · Accepted Answer · 2021-04-19 15:39:32Z

You want to do something like this :

(I also made a proposition for your usage of data, I am using setMyArray to update data when the request returns)

import React, { useEffect, useState } from "react";

const Content = () => {
  const [data, setMyArray] = useState([]);

  useEffect(() => {
    async function getYouTubeList() {
      try {
        let url = "/api/content/";
        let res = await fetch(url);
        let data = await res.json();
        return setMyArray(data);

        // console.log(data);
      } catch (err) {
        console.error(err);
      }
    }
    getYouTubeList();
  }, []);

  return (
    <div>
      <section className="content-landing">
        <div className="dark-overlay">
          <div className="content-landing-inner">
            <h1>Content Archive</h1>
            <p>Enjoy some of my curated content from various sources</p>
            <p>
              {data.map((id) => (
                <li>
                  <iframe
                    width="560"
                    height="315"
                    src={`https://www.youtube.com/embed/${id}`}
                    title="YouTube video player"
                    frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen
                  ></iframe>
                </li>
              ))}
            </p>
          </div>
        </div>
      </section>
    </div>
  );
};

export default Content;

Collectives™ on Stack Overflow

Using Map Function with json Array (React)

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related