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!

Answer 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.

Answer 2

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;