A Really Simple Intro to Changing Styling Using React State
Tags: react, state, hooks, webdev
Published: 2021-04-11 17:41:13

When using React, one of the easiest ways to make style changes to an element on an event is by using state.

In this example, we'll be looking at how we can change the corners of a button from pointed to rounded on click. I know this isn't something you're likely to be doing on a regular basis but it's a nice easy task, just to get to know the concepts.

From this -
![Button with pointed corners](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rvc12mx0b6vi2a8a6fv9.jpg)

To this - 
![Button with rounded corners](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dyn09p0r34udbyyxjlg6.jpg)

**To use this method, you'll need to be using a Class Component rather than a Functional Component.**

Here's our starting .js file, with a simple button and some text.

![Code snippet of starting code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/js9wlp6sci169nfwat2n.png)

And our starting CSS with some simple styling.

![Code snippet of starting CSS code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vvvgjr7meyvqaypwcc0a.png)

So how do we get it working so that the corners will be rounded when you click the button?

First, in our .js file, we'll need to add a new state. You can call this whatever you like but I've called it 'pointedCorners' in this example. Currently, the corners of the button are pointed so we can set the state of 'pointedCorners' to true.

![code snippet of constructor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ztvi9tf2chs4hi7gb2zp.png)

Next, below the constructor, we need to add a new method which will handle the click and toggle the state of 'pointedCorners' between true and false depending on what the current state is.

We'll call our method 'handleClick' for obvious reasons. This checks for the current state of 'pointedCorners' and changes the state to be the opposite.

![adding handleClick function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5jz3jwzxkc670dez87sw.png)

Be sure to bind your method in the constructor like so -

![Binding the method](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eln7e3z3i7ilkr8hv9em.png)

Binding ensures that 'this' is defined when you call the function.

We now need to link our method to the button so that the method runs when the button is clicked. Do this by adding {this.handleClick} to the onClick value in your button.

![Add onclick event listener to button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5n3vklcp9qstjg9ub3if.png)

Next, we'll jump over to our CSS file. We need to add two classes which can be applied to the button depending on whether the 'pointedCorners' state is true or false. In this case, we'll add one which sets the corners to be rounded and one that sets the corners to be pointed.

![Add new styling for classes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d5m1r75d7cli9x0hza8l.png)

Then we'll jump back over to the .js file. Within the render method, we need to add a new variable. We'll call ours 'toggleBtnClass'. The variable uses a ternary operator to check the current state of 'pointedCorners' and if it's true, the class is set to 'roundedButton', if it's false, the class is set to 'pointedButton'.

![use ternary operator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fcd0qsxa88v1du4vv1mh.png)

Finally, we need to set the className of the button to the 'toggleBtnClass' variable.

![set new class name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6mza23souss3msb3t8to.png)

You should then have a button that changes when clicked.

&nbsp;
&nbsp;

You can find the GitHub repo for this exercise here - https://github.com/LauraToddCode/Changing-Styling-Using-React-State