Why my map function doesnt work (react js API)

JavaScript
1

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>
    </>
)
}
3

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
5

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.

6

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;
7

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
8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.