Map Is Not A Function (React)

So I am trying to be able to mark pins but I get the error. I don’t understand it because I am dealing with an array.

Uncaught TypeError: is not a function

const [pins, setPins] = useState([]);

const createPins = () => {
      return (
    <Room style={{fontSize: viewport.zoom * 7, color: 'stateblue'}}/>
      <div className='card'>
      <h4 className='place'>Beautiful Place</h4>
      <p className='desc'>Beautiful place. I like</p>
      <div className='stars'>
      <Star className='star'/>
      <Star className='star'/>
      <Star className='star'/>
      <Star className='star'/>
      <Star className='star'/>
      <span className='username'>Created by <b>Gion</b></span>
      <span className='date'>Created now</span>

How can I fix it?

Based on the code that you are showing, this doesn’t make sense.

But your code also doesn’t quite makes sense. Is this part of a larger component? So you setPins anywhere?

My first instinct in debugging would be to go into createPins and just log it out to see what it is:

const createPins = () => {
  return (
  // ...

I might also suggest to use more standard (and consistent) formatting - it makes your life easier. Also, all that stuff in createPins should probably be its own component.

It is part of a larger component called MapPage.js and everything is part of a functional component. Pins is an object and I solved the issue changing the response to get all the pins on my backend from an object to an array.

Yes, that was the point of the debug comments. And my comments on formatting and breaking things off into separate components still stand. If you have a “renderX” function that is returning JSX and it is more than a few lines, it should almost certainly be its own component.

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