array.map is not a function, reactjs setState error

Question

After setting the state reactJs comes up with an error blogs.map is not a function. How do I convert blogs into arrays, although it is initialized as an array.

  const [blogs,setBlogs] = useState([]);
  useEffect(async() => {
        await axios.get(`${API_URL}/api/getblogs`,{
          headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'Access-Control-Allow-Origin': '*'
        }
        })
        .then((res)=>{
          res.data.result.forEach(element => {
            element.blogArray.forEach((b)=>{
             // console.log(b);
              setBlogs(b);
            })
          });
          
        })
        .catch((err)=>{
          console.log(err)
         
        })
      }, []);
    

      useEffect(()=>{
          console.log(blogs)
      },[blogs]);

return(
     <div className="row">
              {
                
                blogs &&
                blogs.map((blog)=>{
                  return (
                    
                   <Cardschema key={Math.random()}/>
                  )
                  
                })
                
              }
              </div>
)

It looks like you just want to do setBlogs(res.data.result). Why are you looping over it? You're overwriting the state with an individual blog every time the forEach iterates. — Andy Ray
– Andy Ray, Commented Mar 3, 2021 at 7:41

Shubham Khatri · Accepted Answer · 2021-03-03 07:43:29Z

1

You should not call setBlogs method multiple times. Instead aggregate all the data and set it once

.then((res)=>{
     var blogs = []
     res.data.result.forEach(element => {
            element.blogArray.forEach((b)=>{
                 // console.log(b);
                 blogs.push(b);
            });
     });
     setBlogs(blogs);          
});

answered Mar 3, 2021 at 7:43

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ESWolters · Accepted Answer · 2021-03-03 09:50:35Z

1

Since blogArray already is an array you should be able to do:

setBlogs([...blogs, ...blogArray])

and skip at least the second loop.

Now I can imagine you might want to modify the data before setting it to state in that case I would recommend not using forEach like your code but map (at least for the nested loop). Which would look like this.


const formattedBlogrray = element.blogArray.map((blog)=> {
   // do formatting
   return {
      ...formattedBlog,
      
   }
});
setBlogs([...blogs, ...formattedBlogArray])

edited Mar 3, 2021 at 9:50

answered Mar 3, 2021 at 9:22

ESWolters

3703 silver badges6 bronze badges

1 Comment

Makarand Over a year ago

Thank you for your response :). This could be one of the solutions.

Collectives™ on Stack Overflow

array.map is not a function, reactjs setState error

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related