What's the best way to modify the style property of a button when it's clicked in

Question

What's the best way to modify the style property of a button when it's clicked in

I am working with a react element that I need to hide when a button is clicked.

The styles for the element are set in the constructor like this:

  constructor(props) {
    super(props);
    this.state = {
      display: 'block'
    };
    this.ElementStyle= {
      width: '100%',
      backgroundColor: '#F6F6F6',
      color: '#404040',
      padding: '8px 15px',
      boxSizing: 'content-box',
      position: 'fixed',
      bottom: '0',
      display: this.state.display
    }
  }

The element contains a button inside its render() method which calls a function to change the state:

  render()  {
    <button onClick={this.Method.bind(this)}>Click me </button>
  }

Here is the Method():

  Method() {
    this.setState({
      display: 'none'
    });
  }

Additionally, in the shouldComponentUpdate() method:

  shouldComponentUpdate() {
    this.ElementStyle.display = this.state.display;
  }

However, running this code results in a

"TypeError: "display" is read-only"

error.

javascript html css reactjs

Answer 1

Answer №1

Just put your styles in the state:

State

this.state = {
  ElementStyle: {
    width: '100%',
    backgroundColor: '#F6F6F6',
    color: '#404040',
    padding: '8px 15px',
    boxSizing: 'content-box',
    position: 'fixed',
    bottom: '0',
    display: 'block'
  };
}

Method

 Method() {
    this.setState({
      ElementStyle: {
        ...this.state.ElementStyle,
        display: 'none'
      }
    });
  }

Render

render()  {
  <button style={this.state.ElementStyle} onClick={this.Method.bind(this)}>Click me </button>
}

Answer 2

Just put your styles in the state:

State

this.state = {
  ElementStyle: {
    width: '100%',
    backgroundColor: '#F6F6F6',
    color: '#404040',
    padding: '8px 15px',
    boxSizing: 'content-box',
    position: 'fixed',
    bottom: '0',
    display: 'block'
  };
}

Method

 Method() {
    this.setState({
      ElementStyle: {
        ...this.state.ElementStyle,
        display: 'none'
      }
    });
  }

Render

render()  {
  <button style={this.state.ElementStyle} onClick={this.Method.bind(this)}>Click me </button>
}

Answer 3

Answer №2

To enhance your component's style, consider setting the initial display to none using the following CSS:

// css
.yourclass {
 width: '100%',
  backgroundColor: '#F6F6F6',
  color: '#404040',
  padding: '8px 15px',
  boxSizing: 'content-box',
  position: 'fixed',
  bottom: '0',
  display: none
    }
}

// Create a class that toggles display to block
.show {
  display: block;
}

In your JavaScript code, you can manage the state and update the display property accordingly:

// Set the initial state for the hidden element
this.state = {
   showHiddenElement: false
}

// Toggle the state to change the display property
const {showHiddenElement} = this.state;
this.setState({
  showHiddenElement: !showHiddenElement
})

// Apply the appropriate class based on the state in your component
const toggle = this.state.showHiddenElement;
<yourelement className={`yourclass ${toggle? 'show' : ''}`}

This approach offers flexibility in managing the visibility of elements within your component. Let me know if you have any questions or need further clarification!

Answer 4

To enhance your component's style, consider setting the initial display to none using the following CSS:

// css
.yourclass {
 width: '100%',
  backgroundColor: '#F6F6F6',
  color: '#404040',
  padding: '8px 15px',
  boxSizing: 'content-box',
  position: 'fixed',
  bottom: '0',
  display: none
    }
}

// Create a class that toggles display to block
.show {
  display: block;
}

In your JavaScript code, you can manage the state and update the display property accordingly:

// Set the initial state for the hidden element
this.state = {
   showHiddenElement: false
}

// Toggle the state to change the display property
const {showHiddenElement} = this.state;
this.setState({
  showHiddenElement: !showHiddenElement
})

// Apply the appropriate class based on the state in your component
const toggle = this.state.showHiddenElement;
<yourelement className={`yourclass ${toggle? 'show' : ''}`}

This approach offers flexibility in managing the visibility of elements within your component. Let me know if you have any questions or need further clarification!

Answer 5

Answer №3

incorrect action taken react utilizes a virtual dom, which is automatically managed, however you are attempting to modify its behavior, perhaps you could handle it in this manner:

constructor(props) {
    super(props);
    this.state = {
       display: 'block'
    };
}


Method() {
   this.setState({
       display: 'none'
   });
}


render()  {
  <div>
     <div style={{display: this.state.display}} ></div>
     <button onClick={this.Method.bind(this)}>Click me </button>
  </div>
}

there are also other options available, but this is the simplest approach.

Answer 6

incorrect action taken react utilizes a virtual dom, which is automatically managed, however you are attempting to modify its behavior, perhaps you could handle it in this manner:

constructor(props) {
    super(props);
    this.state = {
       display: 'block'
    };
}


Method() {
   this.setState({
       display: 'none'
   });
}


render()  {
  <div>
     <div style={{display: this.state.display}} ></div>
     <button onClick={this.Method.bind(this)}>Click me </button>
  </div>
}

there are also other options available, but this is the simplest approach.

Answer 7

Answer №4

Using the style property to set styles directly on elements is not the recommended approach. It's better to use CSS classes and stylesheets for styling, and then modify classes during runtime.

In your case, you can define the styles in a class, let's say in App.scss:

.class-to-be-applied {
    width: 100%;
    background-color: #F6F6F6;
    color: #404040;
    padding: 8px 15px;
    box-sizing: content-box;
    position: fixed;
    bottom: 0;

    .no-display {
        display: none;
    }
}

Then, in App.js,

import React, { Component }  from 'react';
import classnames from 'classnames';
import './App.scss';

class MyComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            display: true
        };
    }
    handleButtonClick = () => {
        this.setState(({ display }) => ({display: !display}));
    }
    render()  {
        return (
            <div>
                <button onClick={this.handleButtonClick}>Click me </button>
                <SomeComponent className={classnames('class-to-be-applied', {'no-display': !this.state.display})} />
            </div>
        );
    }
}

Another way to achieve the same result, and a more preferred method, is to conditionally render the component so it's not inserted into the DOM tree at all. Here's how you can do it in App.js,

import React, { Component }  from 'react';
import classnames from 'classnames';
import './App.scss';

class MyComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            display: true
        };
    }
    handleButtonClick = () => {
        this.setState(({ display }) => ({display: !display}));
    }

    render()  {
        return (
            <div>
                <button onClick={this.handleButtonClick}>Click me </button>
                { this.state.display && <SomeComponent className='class-to-be-applied' /> }
            </div>
        );
    }
}

Answer 8

Using the style property to set styles directly on elements is not the recommended approach. It's better to use CSS classes and stylesheets for styling, and then modify classes during runtime.

In your case, you can define the styles in a class, let's say in App.scss:

.class-to-be-applied {
    width: 100%;
    background-color: #F6F6F6;
    color: #404040;
    padding: 8px 15px;
    box-sizing: content-box;
    position: fixed;
    bottom: 0;

    .no-display {
        display: none;
    }
}

Then, in App.js,

import React, { Component }  from 'react';
import classnames from 'classnames';
import './App.scss';

class MyComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            display: true
        };
    }
    handleButtonClick = () => {
        this.setState(({ display }) => ({display: !display}));
    }
    render()  {
        return (
            <div>
                <button onClick={this.handleButtonClick}>Click me </button>
                <SomeComponent className={classnames('class-to-be-applied', {'no-display': !this.state.display})} />
            </div>
        );
    }
}

Another way to achieve the same result, and a more preferred method, is to conditionally render the component so it's not inserted into the DOM tree at all. Here's how you can do it in App.js,

import React, { Component }  from 'react';
import classnames from 'classnames';
import './App.scss';

class MyComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            display: true
        };
    }
    handleButtonClick = () => {
        this.setState(({ display }) => ({display: !display}));
    }

    render()  {
        return (
            <div>
                <button onClick={this.handleButtonClick}>Click me </button>
                { this.state.display && <SomeComponent className='class-to-be-applied' /> }
            </div>
        );
    }
}

Answer 9

Answer №5

1) Embed your element within inline CSS code :-

render() {
    return (
        <div>
            <button onClick={ this.Method.bind(this) }>Click me </button>
            <h1 style={{
                 width: '100%',
                 backgroundColor: '#F6F6F6',
                 color: '#404040',
                 padding: '8px 15px',
                 boxSizing: 'content-box',
                 position: 'fixed',
                 bottom: '0',
                 display:this.state.display
            }}>About</h1>
        </div>
    )
}

2) Delete the shouldComponentUpdate() method

 shouldComponentUpdate() {
this.ElementStyle.display = this.state.display;
}

Answer 10

1) Embed your element within inline CSS code :-

render() {
    return (
        <div>
            <button onClick={ this.Method.bind(this) }>Click me </button>
            <h1 style={{
                 width: '100%',
                 backgroundColor: '#F6F6F6',
                 color: '#404040',
                 padding: '8px 15px',
                 boxSizing: 'content-box',
                 position: 'fixed',
                 bottom: '0',
                 display:this.state.display
            }}>About</h1>
        </div>
    )
}

2) Delete the shouldComponentUpdate() method

 shouldComponentUpdate() {
this.ElementStyle.display = this.state.display;
}

What's the best way to modify the style property of a button when it's clicked in

Answer №1

State

Method

Render

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Error: Module 'electron-prebuilt' not found

Is there a more efficient method than creating a separate variable for the navbar on each individual page where it is being utilized?

Can someone provide guidance on utilizing the index correctly within this v-for to prevent any potential errors?

What is causing the UI to change every time I add a tag to refresh the web view?

Submit a form using Ajax without having to reload the page

Encountering difficulties in creating an app with Apache Cordova

Is it true that Javascript's onclick global event handlers fire prior to the page being fully loaded

Learn the process of creating a unique item layout to suit your preferences

Navigating following a JQuery AJAX request in PHP

How to Send an Array to AJAX and Retrieve the Data in Codeigniter Controller

Methods for bypassing a constructor in programming

Steps for inserting buttons into rows of a material-ui data grid

Troubleshooting: 404 Error When Trying to Send Email with AJAX in Wordpress

How can the <animate /> tag be triggered using only CSS and HTML?

`The submit button fails to function properly within the Capacitor application`

Is there a way to gather information from a web service and neatly display it within an HTML table?

What could be causing images in the public folder to fail loading in Nextjs?

How can I convert the left links in my navigation bar to a CSS drop-down menu to make it more responsive on small screens?

Discover the child of the delegated event div using jQuery

Whenever a button is clicked in a custom column rendering of a React material table, the sorted state is lost. This issue occurs whenever any state update is triggered