CODEWITHSUNDEEP
javascriptcssreactjs
R. Kohlisch
R. Kohlisch

Reputation: 2993

Re-rendering styles in React (onClick, turn div background from red to blue)

I have the following very simple React Class:

import React from "react"

let color = 'red';

export default class DoubleClick extends React.Component {  
  handleClick() {
    console.log("Hi");
    color = 'blue';
  }
  handleDoubleClick() {
    console.log("Double Click");
  }
  render() {
    return (
      <div style={{backgroundColor: 'pink'}}>
          <div onClick={this.handleClick} style={{backgroundColor: color}}> 
            <span onDoubleClick={this.handleDoubleClick}> Hello </span> 
            <span onDoubleClick={this.handleDoubleClick}> world. </span>
          </div>
      </div>
    );
  }
}

I would like to change the background color of the div, when the div is clicked. What would be the best approach to do this with React? I have defined a color variable outside of the class, but I am aware that this is probably not the right approach. Also, it is not working or re-rendering, although the console.log does work and the function is called.

Upvotes: 0

Views: 483

Answers (3)

misraX
misraX

Reputation: 985

It's not working beacuse you did not bind this to your function so, a function way of doing such a thing is to use a changable state:

import React from 'react';

export default class DoubleClick extends React.Component {
  constructor() {
    super();
    this.state = {
      style: {
        color: 'red'
      }
    };
  }
  handleClick() {
    console.log('Hi');
    this.setState({ style: { color: 'blue' } });
  }

  handleDoubleClick() {
    console.log('Double Click');
  }

  render() {
    return (
      <div>
        <div onClick={this.handleClick.bind(this)} style={this.state.style}>
          <span onDoubleClick={this.handleDoubleClick.bind(this)}> Hello </span>
          <span onDoubleClick={this.handleDoubleClick.bind(this)}> world. </span>
        </div>
      </div>
    );
  }
}

edited: Fixing the state management.

Upvotes: 1

Alexis
Alexis

Reputation: 5831

You can store your color in the state edit the state on click and use the state in your DOM. 

constructor(props){
  super(props);
  this.state{
    color:"red" //initial value
  }
  
  onClick(){
   this.setState({
    color:"blue";
   })
  }
  
  render(){
    return <div onClick={() => this.onClick()} style={{color:this.state.color}}>test</div>
  }
}

Upvotes: 0

Mario Nikolaus
Mario Nikolaus

Reputation: 2406

Just keep your color in Component's state and toggle it on clicks.

import React from "react"

export default class DoubleClick extends React.Component {
  constructor() {
    super();
    this.state = {
      color: 'red',
    };
  }

  render() {
    return (
      <div style={{backgroundColor: 'pink'}}>
          <div onClick={() => this.setState({ color: 'blue'})} style={{backgroundColor: color}}> 
            <span onDoubleClick={() => this.setState({ color: 'red'})}> Hello </span> 
            <span onDoubleClick={() => this.setState({ color: 'red'})}> world. </span>
          </div>
      </div>
    );
  }
}

Upvotes: 1

Related Questions