CODEWITHSUNDEEP
cssreactjs
albert_anthony6
albert_anthony6

Reputation: 614

React component stops working when I add css to it

I have a component that has a state "style" which changes to a random color in my colors array whenever a button is clicked. The state is passed inside a style attribute so that the backgroundColor would become whatever the state is. This is working but whenever I try to add css to the button, it stops working as intended. I have a hunch that it could be due to the position absolute that I used but I have no idea why it's doing that.

All I could do was comment out the CSS to make the button work again but that really doesn't solve my issue.

import React, {Component} from 'react';
import "./Tap.css";

class Tap extends Component{
    constructor(props){
        super();
        this.state={
            style: ''
        }
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(){
        const colors = ["#68ad45", "#123456", "#987546", "#ab23c6", "#324517", "#456819"];
        let i = Math.floor(Math.random() * 6);
        this.setState({
            style: colors[i]
        });
    }
  render(){
    return(
      <div className="Tap" style={{backgroundColor: this.state.style}}>
          <button onClick={this.handleClick}>Click Here</button>
      </div>
    );
  }
}

export default Tap;

// ========================== CSS file ==========================


.Tap button{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: none;
    outline: none;
    padding: 10px;
    font-size: 200px;
    cursor: pointer;
}

No error messages, just no result coming from the button after it's been styled with the css.

Upvotes: 1

Views: 101

Answers (2)

Piyush Jain
Piyush Jain

Reputation: 1986

Just do this simple change <button onClick={this.handleClick} style={{backgroundColor: this.state.style}}>Click Here</button>

check sample code - https://stackblitz.com/edit/react-soy8a4

Upvotes: 1

Kareem Dabbeet
Kareem Dabbeet

Reputation: 3994

This is because: position: absolute which is added to button, So Tab div have no height now

One solution: is to div that div fixed height:

.Tap {
  height: 50px;
}

See Example 1

But if you noticed that the tab not aligned with button because of absolute position.

Other Solution position the Tab not the button as absolute with some padding:

See example 2

Upvotes: 2

Related Questions