score:0

import React, { Component } from 'react'

export default class YourClass extends Component {
  constructor(props) {
    super(props)
    this.state = {
      color: 'black'
    }
    this.changeColor = this.changeColor.bind(this)
    this.changeColor2 = this.changeColor2.bind(this)
  }

  changeColor() {
    this.setState({
      color: 'red'
    })
  }

  changeColor2() {
    this.setState({
      color: 'green'
    })
  }

  render() {
    return (
      <div style={{ backgroundColor: this.state.color }}>
        <button onClick={this.changeColor} />
        <button onClick={this.changeColor2} />
      </div>
    )
  }
}

score:1

import React from "react";
import "./styles.css";

export default function App() {
  const [bg, changeBGColor] = React.useState(1);
  return (
    <div className="App">
      <div
        className="box"
        onClick={() => changeBGColor(1)}
        style={{
          backgroundColor: bg === 1 ? "black" : "red"
        }}
      />
      <div
        className="box"
        onClick={() => changeBGColor(2)}
        style={{
          backgroundColor: bg === 2 ? "black" : "yellow"
        }}
      />
      <div
        className="box"
        onClick={() => changeBGColor(3)}
        style={{
          backgroundColor: bg === 3 ? "black" : "green"
        }}
      />
    </div>
  );
}

Related Query

More Query from same tag