Question 72522 in Reactjs Question posted in
The new location for the React Documentation can be found here.

I couldnt render components by mapping through an array of elements in React – Reactjs

I can console.log the array data but couldnt map through it. here is the code

import axios from 'axios'
import React from 'react'
import { useEffect } from 'react'
import { useState } from 'react'

const Row = (props) => {

    const [movies, setMovies] = useState([])

    useEffect(()=>{
        axios.get(props.fetchURL).then((response) => {
            setMovies(response.data.results)
        })

    }, [props.fetchURL])

    console.log(movies);
  return (
    <>
        <h2 className='text-gray-300 m-4'>{props.title}</h2>
        <div className='relative flex items-center'>
            <div id={'slider'}>
                {movies.map((item)  =>{
                    <div className='w-[160px] sm:w-[200px] md:w-[240px] lg:w-[280px] inline-block'>
                        <img src={`https://image.tmdb.org/t/p/w500/${item?.backdrop_path}`} alt={item?.title} />
                        <p>{item?.title}</p>
                    </div>
                      
                })}

               


            </div>

        </div>

    </>
  )
}

export default Row

can someone please tell me whats wrong with my code??

I tried rendering normal jsx elements inside the div it works fine. The problem only occurs when trying to map my array

Tags:

3

Answers


  1. 0

    You should add return.

    Replace code with this:

    {movies.map((item)  =>{
                    return <div className='w-[160px] sm:w-[200px] md:w-[240px] lg:w-[280px] inline-block'>
                        <img src={`https://image.tmdb.org/t/p/w500/${item?.backdrop_path}`} alt={item?.title} />
                        <p>{item?.title}</p>
                    </div>
                      
                })}
    Login or Signup to reply.
  2. 0

    your map function does not return anything (null array)
    this is the modified one

    {movies.map(item  =>
   <div key={item} className='w-[160px] sm:w-[200px] md:w-[240px] lg:w-[280px] inline-block'>
   <img src={`https://image.tmdb.org/t/p/w500/${item?.backdrop_path}`} alt={item?.title} />
   <p>{item?.title}</p>
   </div>
)}

    Also I would do this setMovies(movies => response.data.results) to instantly set state

    Login or Signup to reply.
  3. 0

    You are returning undefined. You need to return the element.

    import axios from 'axios'
import React from 'react'
import { useEffect } from 'react'
import { useState } from 'react'

const Row = (props) => {

    const [movies, setMovies] = useState([])

    useEffect(()=>{
        axios.get(props.fetchURL).then((response) => {
            setMovies(response.data.results)
        })

    }, [props.fetchURL])

    console.log(movies);
  return (
    <>
        <h2 className='text-gray-300 m-4'>{props.title}</h2>
        <div className='relative flex items-center'>
            <div id={'slider'}>
                {movies.map((item)  =>{
              
                return    (<div className='w-[160px] sm:w-[200px] md:w-[240px] lg:w-[280px] inline-block'>
                        <img src={`https://image.tmdb.org/t/p/w500/${item?.backdrop_path}`} alt={item?.title} />
                        <p>{item?.title}</p>
                    </div>)
                      
                })}

               


            </div>

        </div>

    </>
  )
}

export default Row
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search