Map Is Not A Function (React)

JavaScript
1

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: pins.map is not a function

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

const createPins = () => {
      return (
      <React.Fragment>
      {pins.map(p=>( 
      <Marker
      latitude={p.lat}
      longitude={p.long}
      offsetLeft={-20}
      offsetTop={-10}
    >
    <Room style={{fontSize: viewport.zoom * 7, color: 'stateblue'}}/>
    <Popup 
      longitude={-122} 
      latitude={37}
      anchor="left"
      closeButton={true}
      closeOnClick={false}
      >
      <div className='card'>
      <label>Place</label>
      <h4 className='place'>Beautiful Place</h4>
      <label>Review</label>
      <p className='desc'>Beautiful place. I like</p>
      <label>Rating</label>
      <div className='stars'>
      <Star className='star'/>
      <Star className='star'/>
      <Star className='star'/>
      <Star className='star'/>
      <Star className='star'/>
      </div>
      <label>Information</label>
      <span className='username'>Created by <b>Gion</b></span>
      <span className='date'>Created now</span>
      </div>
    </Popup>    
    </Marker>
    ))}
    </React.Fragment>
  )}

How can I fix it?

2

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 = () => {
  console.log(pins)
  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.

4

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.

5

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.

6

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