Question 259201 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to change the className on React Component based on this.click?

I want to change the className of an div based on whether it’s clicked or not by the user.

export default class Dimension extends Component {
  constructor(props){
  super(props)
    this.state ={
      click : false
    }
}

  render() {
    return (
      <div className='scroll-container'>
      <div className={this.state.click ? 'circle-one' : "circle"} id='circle-one'  onClick={() => {
        this.state.click = !this.state.click;
        console.log(this.state.click)
        }}></div>
    </div>
    )
  }
}

I have tried to use constructor, arrow function and even using bind and they always said that they cant read property of null.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0 
    export default function Dimension() {
  
  const [click, setClick] = useState(false);
  const handleClick = () => setClick(!click);
  const top = window.scrollY
  function OnHit(circle, top){
    const selected = document.getElementById(circle)
    console.log(selected)
    window.scrollTo({top});
    if(click === true)
    {
      selected.style.backgroundColor = "red"
      console.log(click)
      console.log(top)
      return
    }
    else if(click === false){
      selected.style.backgroundColor = "transparent"
      console.log(click)
      return
    }
  }
  return (
    <div className='scroll-container'>
        <div className={click ? 'circle-one' : "circle"} id='circle-one' onClick={()=>{
          OnHit("circle-one", "0")
        handleClick()}}>

        </div>
        {/* <div className={click ? 'circle-two' : "circle"} id='circle-one'  onClick={handleClick}></div> */}


    </div>
  )
}`enter code here`
this is my function component but i get the same problem, all circles change if i click one, but i want to change just the one that is clicked

  2. 0

    Change how you mutate your state

    onClick={() => this.setState({ click: !this.state.click })}

    Component

    <div
    id='circle-one'
    className={this.state.click ? 'circle-one' : 'circle'}
    onClick={() => this.setState({ click: !this.state.click })}>
</div>

    Also unless you are maintaining some legacy project I would highly recommend upgrading your version of react and moving away from class components

    Login or Signup to reply.
  3. 0

    You need to call this.setState to change the component’s state. If you try to set this.state.click directly, the component will not update.

    I would also make the event handler callback a method of the component, rather than an in-line arrow/lambda.

    const { Component } = React;

class Dimension extends Component {
  constructor(props) {
    super(props);
    this.state = { click : false }
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState((prevState) => ({
      click: !prevState.click
    }))
  }
  render() {
    return (
      <div className="scroll-container">
        <div
          id="circle-one"
          className={this.state.click ? 'circle-one' : 'circle'}
          onClick={this.handleClick}></div>
      </div>
    )
  }
}

const App = () => (
  <Dimension />
);

ReactDOM
  .createRoot(document.getElementById("root"))
  .render(<App />);
    .circle,
.circle-one {
  width: 2rem;
  height: 2rem;
  border: 2px solid grey;
  border-radius: 50%;
}

.circle:hover,
.circle-one:hover {
  cursor: pointer;
}

.circle-one:after {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  content: '1';
  font-family: Arial;
  font-size: 1.25rem;
  font-weight: bold;
  color: grey;
}
    <div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search