How to remove child component in react native

Question

I am using react native mapbox and have several and dynamic child component(layers) in Map component.

Something like:

<MapboxGL.MapView ...>
   <MapboxGL.RasterSource>
   ...
   </MapboxGL.RasterSource>
  ...
</MapboxGL.MapView>

There so many child component dynamic and conditonal.

I want to remove unwanted component because update some component doest not support.

So any suggestion or idea

Answer 1

You can use state and conditionally render your items depending on the state e.g

const Component = ()=>{
  const [isVisible, setIsVisible] = useState(false);
  ...
  ...
  ...
  return (
    <MapboxGL.MapView ...>
      {...}
      // you can shortcircuit here
      {isVisible && <DynamicComponent>}
      // this should also work
      {isVisible ? <AnotherComponent/> : null }
    </MapboxGL.MapView>
  )
}

Answer 2

const Component = ()=>{
  const [showComponent, setShowComponent] = useState(false);

  return (
    <MapboxGL.MapView ...> 
      
      {showComponent && (
          <View>{.....}</View>
          : null }
      
    </MapboxGL.MapView>
  )
}