Skip to content
Advertisement

I receive an undefined value when I pass the value of a variable through props from a parent component to a child component

I create a variable pointsFilter in app.js and through props I send the value to a child component in this case the component is Map but when I want to extract the value I get undefined and when i do a console.log in app i get the value but when i do the same in map.js i get undefined

app.js

const [pointsFilter, setPointsFilter] = useState(true)

<Map onLongPress={handleLongPress} puntos={puntos} poinstFilter={pointsFilter} />

map.js

    export default ({ onLongPress, puntos, pointsFilter }) => {

  console.log(pointsFilter)

  return (
    <Mapview style={styles.map} onLongPress={onLongPress} >
      {pointsFilter && puntos.map(x => <Marker coordinate={x.coordinate} title={x.name} key={x.name} />)}
    </Mapview>
  )
}

Advertisement

Answer

On app.js you pass poinstFilter and on Map, you try to extract pointsFilter. Use the same name on both sides. Moreover, I don’t see the component name on your Map component. You may create components as

const export default Map= ({ onLongPress, puntos, pointsFilter })

enter image description here

Advertisement