React conditional style on custom click

Question

I am trying to change a class when onClick event is fired, my function is called and it seems to be working but the class just won't update un the render, this is my code:

import React from 'react';

const Something = props => {
  let opened = false;

  const toggle = () => {
    opened = !opened;
  };

  return (
    <div className={opened ? 'some-class opened' : 'some-class'}>
      <div className="some-inner-class" onClick={toggle}>
       ...content
      </div>
    </div>
  );
};

export default Something;

I just want to be able to change style on when click event is fired.

Just define opened value as state to rerender your component when it is changed. and use this.setState function to update it. — Diamond
– Diamond, Commented Aug 16, 2019 at 23:43

Amaz Triss · Accepted Answer · 2019-08-16 23:55:26Z

2

My suggestion to you will be to use react hooks in this scenario, by that I mean, something like this, I have updated your code with my suggestion; Hope it helps;

import React, { useState }  from 'react';

const Something = props => {
  // ***because this doesn't exist in a function component and we'd want to persist this value of opened between function call, a react hook in a function component will be ideal in your case. 
  //let opened = false; 

  // *suggestion as per react documentation: useState hook lets us keep local state in a function component
  const [opened, setOpened] = useState(false);

  // ***you don't really need this part, see my approach in second div of return 
  // const toggle = () => {
  //   opened = !opened;
  // };

  return (
    <div className={opened ? 'some-class opened' : 'some-class'}>
      <div className="some-inner-class" onClick={() => setOpened(true)}>
        <p>Click me</p>
      </div>
    </div>
  );
};

export default Something;

answered Aug 16, 2019 at 23:55

Amaz Triss

961 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Josué Almonasi Over a year ago

This is great help, after adapting this code I did this: onClick={!opened ? () => setOpened(true) : () => setOpened(false)} in order to return opened to its previous state, not sure if this is the best practice to do it but it is working.

Evan · Accepted Answer · 2019-08-16 23:30:53Z

1

You need to update state in React for a rerender to occur. You should be creating state in a constructor like:

constructor() {
  super();
  this.state = { toggled: false };
}

Then, in your toggle function you need to call

this.setState({toggled: !this.state.toggled});

Currently your component is a stateless functional component so you would either need to rewrite it as a class that extends React.component or you could use hooks, https://reactjs.org/docs/hooks-state.html. Since it looks like you're just starting to learn how to use React I would rewrite the component as a class first and then try to refactor it using hooks (the modern practice).

answered Aug 16, 2019 at 23:30

Evan

2421 gold badge3 silver badges9 bronze badges

1 Comment

Josué Almonasi Over a year ago

Thanks, you're correct, I'm kind of new to react and sure I will follow your advice.

Collectives™ on Stack Overflow

React conditional style on custom click

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related