Having issues typing into my input box or clicking on things[React] Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Having issues typing into my input box or clicking on things[React] without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I am a bit confused as why my input box is frozen and a click is not working on my label. I looked around for an answer and read one that said i needed to set the value and a callback. Did that and still no go. Here is my code.

import React, { Component } from 'react'

class ItemsNew extends Component{
    constructor(props){
        super(props)
        this.state = {
            name: 'a',
            price: '',
            location: '',
            used: '',
            descriptipn: '',
            imgUrl: '',
            shippingCost: ''
        }
        console.log(this.state)
    }

    handleOnChange = (event) => {
        debugger
        this.setState({
            name: event.target.value 
        })
    }

    handleOnClick = (event) => {
        debugger
    }

    render(){
        return  (
            <div>
                <label onClick={this.handleOnClick}>name</label>
                <input id='name' type='text' onChange={this.handleOnChange} value={this.state.name}/><br/>
            </div>
            )
    }
}

export default ItemsNew;

My console.log hits and prints out this.state. However none of my event handler get hit with the debugger. The input box does get printed out with an ‘a’ when on the first load of the page.

Looking through the React dev tools this is my DOM. ![image of DOM]: https://ibb.co/mQEaN6 Also the tools say that the props are Read Only.

Answer

After building my app back up from scratch I found the problem is in the CSS. Which I find strange. The rendered out div was nested in a main div that had the z-index style of -1 so that my header content was on top of it. I changed the z-index around for the header and gave the header a position of relative and now everything works.

Previous css code:

.main{
    width: 600px;
    height: 650px;
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border: 7px;
    border-style: solid;
    border-color: grey;
    box-shadow: 10px 13px 15px 0 rgba(0,0,0,0.3);
    transform: translateY(-12%);
    overflow-y: auto;
    **z-index: -1;**
    background: lightblue;
}

.app-title{
    text-align: center;
    color: teal;
    margin-top: 38px;
}

New CSS code:

.main{
  width: 600px;
  height: 650px;
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border: 7px;
  border-style: solid;
  border-color: grey;
  box-shadow: 10px 13px 15px 0 rgba(0,0,0,0.3);
  transform: translateY(-12%);
  overflow-y: auto;
  background: lightblue;
}

.app-title{
  text-align: center;
  color: teal;
  margin-top: 38px;
  **position: relative;**
  **z-index: 1;**
}
We are here to answer your question about Having issues typing into my input box or clicking on things[React] - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji