array.map not a function

Question

When using array map method, the browser page is blank and in the console I receive an error:

array.map not a function

Although when I comment array.map before rendering the page and after page gets renderd I uncomment it and it works fine.

const movieDesc = useSelector((state) => state.movieDesc);
const [allVideo, setallVideo] = useState("");
const getAllVido = async () => {
try {
  const res = await axios.get(
    `https://api.themoviedb.org/3/${movieDesc.desc.media_type}/${movieDesc.desc.id}/videos?api_key=${process.env.REACT_APP_API_KEY}`
  );
  console.log(res.data);
  setallVideo(res.data.results);
} catch {
  console.log(Error);
}
};
useEffect(() => {
  getAllVido();
}, []);

JSX code:

<p className="movieDesc__trailer">All Video</p>
  {allVideo?.map((video) => (
    <>
      <p key={video.id}>{video.name}</p>
      <iframe
        key={video.id}
        className="movieDesc__trailerVideo"
        src={`https://www.youtube.com/embed/${video.key}`}
        title={video.name}
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen
      ></iframe>
    </>
  ))}

  <p className="movieDesc__wrap">Wrapping Up</p>

Try setting the initial state to an array instead of a string `const [allVideo, setallVideo] = useState([]);` — jkoch, Mar 20 '22 at 05:44

score 1 · Answer 1 · answered Mar 20 '22 at 05:43

You're initializing allVideo as a string. .map does not exist on the string prototype, so it's not telling you something false. Initialize it to an empty array and you will be fine.

const [allVideo, setallVideo] = useState([]);

Also make sure that res.data.results is an array, or you will get the same error.

Tanvir Ahmed · Answer 2 · 2022-03-20T05:50:29.810

1

You have initiated allVideo as a string

const [allVideo, setallVideo] = useState("");

When the component mount for the first time, it tries to map allVideo as a result you are getting the error

try initiating allVideo as an empty array

const [allVideo, setallVideo] = useState([]);

edited Mar 20 '22 at 05:50

answered Mar 20 '22 at 05:45

Tanvir Ahmed

357
2
15

score 0 · Answer 3 · answered Mar 20 '22 at 05:49

When you set the useState hook's default value to an empty string, then you are accessing a string's methods and properties.

To fix this issue, simply change Line 2 in your JavaScript code to the following.

const [allVideo, setAllVideo] = useState([]); // Changes have been made here

array.map not a function

3 Answers3