How to put a input form component overlay on ReactMapGL component?

Question

I am new to the React app development. I am trying to create a react app which uses ReactMapGL class from react-map-gl library. This renders the map (I created Map component). I want to display an input form(I created SampleInputForm component) as an overlay on this map towards the right hand side of the page. I am using material-ui framework for the frontend UI design. Below is the code snippet:-

    const useStyles = makeStyles((theme: Theme) =>
      createStyles({
       root: {
        display: 'flex',
        flexDirection: 'column',
        overflow: 'hidden',
    },
  })
)
      <div className={classes.root}>
        <Map />
        <Sampleinputform />
      </div>

This displays the form outside the mapbox area down in the page. If I use Sampleinputform inside my Map Component as a child component then it works fine and I get an input form as an overlay on top of the mapbox top-right side of the page, below is the code snippet:-

export default function Map() {
return (
    <ReactMapGL>
      // some code to render the map goes here
      <SampleInputForm/>
    </ReactMapGL>
}

What am I missing in the first code snippet so that I don't need to pass the form inside Map component?

score 0 · Accepted Answer · answered Mar 23 '20 at 05:12

Using the help found --

I was able to place my components <SampleInputForm/> outside <ReactMapGL>.

.control-panel{
#the styling elements goes here
}

const defaultContainer = ({ children }) => <div className="control-panel">{children}</div>

const SampleInputForm: React.FC = () => {
    const Container = defaultContainer
  return (
    <Container>
          <form noValidate> 
             //Input components goes here
          <form> 
    </Container> )
}

Please suggest if there is another better solution to do the same.

How to put a input form component overlay on ReactMapGL component?

1 Answers1