Why my map function doesnt work (react js API)

I have put my data response in a useState. Then i am trying to get the input data using map function like i used to. Whats probably the issue that it didnt work? Did i map it incorrectly?

const WatchList = () => {
const [data, setData] = useState();

  const formik = useFormik({
    initialValues: {
      name: "",
      description: "",
    },
    onSubmit: (values) => {
      if (localStorage.getItem("sessionID")) {
        const createList = async () => {
          axios({
            method: "post",
            url: `https://api.themoviedb.org/3/list?api_key=${API_KEY}&session_id=${localStorage.getItem(
              "sessionID"
            )}`,
            data: {
              name: values.name,
              description: values.description,
            },
          })
            .then((response) => {
              const list_id = response.data.list_id;
              axios({
                method: "get",
                url: `https://api.themoviedb.org/3/list/${list_id}?api_key=${API_KEY}&language=en-US`,
              })
                .then((response) => {
                  setData(response.data);
                })
                .catch((error) => {
                  console.error(error);
                });
            })
            .catch((error) => {
              console.error(error);
            });
        };
        createList();
      }
    },
  });
return (
 <>
      <div className="container-md my-3 text-white">
        <div className="text-center">
          <h2>Create a list</h2>
        </div>
        <div className="row justify-content-center">
          <div className="col-md-6">
            <form onSubmit={formik.handleSubmit}>
              <div className="mb-3">
                <label htmlFor="name">Name</label>
                <input
                  id="name"
                  name="name"
                  type="text"
                  onChange={formik.handleChange}
                  onBlur={formik.handleBlur}
                  value={formik.values.name}
                  className="form-control"
                />
                {formik.touched.name && formik.errors.name ? (
                  <div>{formik.errors.name}</div>
                ) : null}
              </div>
              <div className="mb-3">
                <label htmlFor="description">Description</label>
                <textarea
                  id="description"
                  name="description"
                  type="text"
                  onChange={formik.handleChange}
                  onBlur={formik.handleBlur}
                  value={formik.values.description}
                  className="form-control"
                  cols="30"
                  rows="7"
                />
                {formik.touched.description && formik.errors.description ? (
                  <div>{formik.errors.description}</div>
                ) : null}
              </div>
              <div className="text-center">
                <button type="submit" className="btn button-style text-white">
                  Create
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
      <div className="container-md">
        {data &&
          data.results.map((item) => (
            <>
              <div key={item.id}>
                <h1>{item.name}</h1>
              </div>
            </>
          ))}
      </div>
    </>
)
}

Do you get an error in the browser console? What are you expecting to happen that does not happen?

Can you post what data.results or data looks like?

i got the data in my console. I put the data in the useState. But when i tried to access it with map fucntion , it doesnt work and got an error.

here is the data when i dont yet do the map function.

{created_by: "sylviaapr", description: "fdff", favorite_count: 0, id: "8220667", items: [],…}
created_by
: 
"sylviaapr"
description
: 
"fdff"
favorite_count
: 
0
id
: 
"8220667"
iso_639_1
: 
"en"
item_count
: 
0
items
: 
[]
name
: 
"fdff"
poster_path
: 
null

I think you meant to post:

{
  created_by: "sylviaapr"
  description: "fdff"
  favorite_count: 0
  id: "8220667"
  iso_639_1: "en"
  item_count: 0
  items: []
  name: "fdff"
  poster_path: null
}

Is this data or data.results? You can only use map on an array and what you posted is not an array (it is an object).

1 Like

oh im sorry, i didnt realize it was an object. and its a data not data.results. Okay i will try to change it to access the objects.

Hello, i am having trouble to call an API.

So, first i call an API and get a data.results. It has an array inside it which has a specific data (listID) that i needed to call the second API. I tried to access the data that i need using map and call the second API. But it got an error. What could be wrong in my code?

import axios from "axios";
import React, { useEffect, useState } from "react";
import { API_KEY } from "./Constants";

const MovieList = () => {
  useEffect(() => {
    axios({
      method: "get",
      url: `https://api.themoviedb.org/3/account/{account_id}/lists?api_key=${API_KEY}&session_id=${localStorage.getItem(
        "sessionID"
      )}`,
    })
      .then((response) => {
        console.log(
          response.data.results.map((listID) => {
            return {
              id: listID,
            };
          })
        );
        axios({
          method: "get",
          url: `https://api.themoviedb.org/3/${listID}/8220871?api_key=${API_KEY}`,
        })
          .then((response) => {
            console.log(response);
          })
          .catch((error) => {
            console.error(error);
          });
      })
      .catch((error) => {
        console.error(error);
      });
  }, []);
  return (
    <>
    </>
  );
};

export default MovieList;

There is a syntax error. On the second call of axios method, listID is not defined. I did not look further if the logic is correct.
For future, you should provide at least some feed of the error, so we have an idea what to look for and you definitely should try to read and understand errors. Generally they are designed to exactly tell you, what is wrong with your code

1 Like