Some Child React Components not working

Question

Everything I have added to My react Component below the header is not functional/not clickable/not working I didn't come across any bugs. Similar child components seem to work on other components. I have used styled components and material-ui. Here is my code on Github --> You can see my Contact_Us component https://github.com/SamkitS/showell/blob/master/src/components/Contact_Us.js

      class Contact extends React.Component {
constructor (props) {
    super(props);
    this.state = {
        markers: [{
            position : {
                lat:19.204729,
                lng: 72.836778,
            }
        }]
    }
}


render () {
    return (
    <Wrapper >

        <header>

        <MuiThemeProvider muiTheme={getMuiTheme()}>
        <CommonBar />
        </ MuiThemeProvider>
        </header>
        <Banner>
         <h1> Contact Us </h1>
        </Banner>
        <PleaseFill> Lets do business together! Send us a Message.

        </PleaseFill>
        <Fields>
        <MuiThemeProvider muiTheme={getMuiTheme()}>
        <TextField
        floatingLabelText="Please enter your full name"
        hintText = "Full Name"
        fullWidth={true}
        type = "text"
         />
        </ MuiThemeProvider>
         <br/>

         <MuiThemeProvider muiTheme={getMuiTheme()}>
         <TextField
        floatingLabelText="Please enter your contact number"
        hintText = "Number"
        fullWidth={true}
        type = "number"

         />
         </ MuiThemeProvider>
         <br/>
         <MuiThemeProvider muiTheme={getMuiTheme()}>
         <TextField
        floatingLabelText="Please enter your email id"
        hintText = "Email Id"
        fullWidth={true}


         />
         </ MuiThemeProvider>
         <br/>
         <MuiThemeProvider muiTheme={getMuiTheme()}>
         <TextField
        floatingLabelText="Enter your message"
        hintText = "Message Body"
        multiLine={true}
        rows ={5}
        fullWidth={true}

         />
         </ MuiThemeProvider>
         <br/>
         <br/>
         <br/>
         <Button>
         <MuiThemeProvider muiTheme={getMuiTheme()}>
        <RaisedButton label="Send" primary={true} style = {{ width: '16rem', height: '3.25rem',}} labelStyle = {labelStyle} />
        </ MuiThemeProvider>
        </Button>


        </ Fields>

        <ContactFooter>
            <Mapnew>
            <MapWithControlledZoom
    containerElement = {
        <div style = {{height: "100%", }} />
    }
    mapElement = {
        <div style = {{height: "100%"}} />

      }
          markers = {this.state.markers}

        />
            </ Mapnew>
            </ContactFooter>
          </ Wrapper>
        );
     }
   }

    export default Contact;

Yes I imported all the necessary things. Yes I have looked for all posible questions and answers on Stackoverflow.

Please let me know where I have gone wrong. Any help is appreciated.

Answer 1

This issue is resolved

The problem was that my header was overlaying the whole page. Everything was "behind" an invisible div, so when I click, I clicked the invisible div, instead of the text fields that lay behind.

These code in styled CSS div caused problems

Top: 0, bottom: 0

When I removed these lines, everything went back to normal.

Credit goes to Edo Rivai.