Changing CSS Attribute on click in React while using Styled Components

Question

I'm making a web in HTML, CSS, and plain JS. I'm planning to convert this into ReactJS. Although, I'm planning to make this into a single JSX file to export it to App.js. My friend recommended me to use Styled Components so I can make all of it into a single JSX file.

The problem is, I have a button which shows a Modal Box when clicked, using the function in plain JS. Currently, I'm having trouble implementing the function on ReactJS.

My code in React looks a bit like this:

//The Exported page
import React, {useState} from "react";
import styled from "styled-components";

export function InfoCalon(){

  return(
    <CustomStyle>
    <div class="content-container">
        <button id="button1" class="button" >Button 1</button>
    </div>

    <div id="modal" class="modalpopup">
        <div class="modal-content">
            //Modal Contents
        </div>
    </div>
    </CustomStyle>
  )
}

const CustomStyle = styled.div`
background-color: black;
color: white;

.button {
  border: none;
  min-width: 30%;
  height: auto;
  display: inline-flexbox;
  text-align: center;
  text-decoration: none;
  margin: 10px 10% 10px 10%;
  transition-duration: 0.2s;
  cursor: pointer;
}


.button:hover{
  transform: scale(1.02);
}

.button:active{
  transform: scale(0.97);
  transition-duration: 0.05s;
}

.modalpopup {
  display: none;          //The attribute that I want to change on button1 click to display: block.
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  background-color: #102037;
  margin: 7% auto;
  position: relative;
  padding: 1% 3% 3% 3%;
  width: 80%;
}
`

I tried using onClick in the button and made a function to show the modal, but I always failed, getting errors such as "var is null()".

Before converting to ReactJS, the code in the JS file was:

var btn1 = document.getElementById("button1");

btn1.onclick = function() {
  modal.style.display = "block";
}

For the HTML and CSS code, it's pretty much everything that's in CustomStyle.

I would appreciate any response for this, thank you.

Tirth Trivedi · Accepted Answer · 2021-11-16 05:56:42Z

2

In the InfoCalon component, you can maintain an internal state which defines whether the modal is open or not

const [isOpen, setIsOpen] = useState(false);

Now to toggle this you need to attach an event listener to the button like this

<button id="button1" onClick={(e) => setIsOpen(!isIsOpen)} class="button" >Button 1</button>

Now all you need to do is conditionally render the modal i.e. only show the modal if the isOpen is true.

{isOpen && (<div id="modal" class="modalpopup">
    <div class="modal-content">
        //Modal Contents
    </div>
</div>)}

And you also need to remove the display: none from the styles of the modal.

answered Nov 16, 2021 at 5:56

Tirth Trivedi

1351 silver badge7 bronze badges

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

Comments

Drew Reese · Accepted Answer · 2021-11-16 06:06:49Z

2

styled-component are React components, so you can pass props to them. I would suggest adding a isClicked (or similar) state to the InfoCalon component and update it from a click handler attached to the button. Pass the isClicked value as a prop to CustomStyle component.

export function InfoCalon() {
  const [isClicked, setIsClicked] = React.useState(false);

  const clickHandler = () => setIsClicked(clicked => !clicked);

  return(
    <CustomStyle isClicked={isClicked}>
      <div class="content-container">
        <button id="button1" class="button" onClick={clickHandler}>
          Button 1
        </button>
      </div>

      <div id="modal" class="modalpopup">
        <div class="modal-content">
          //Modal Contents
        </div>
      </div>
    </CustomStyle>
  )
}

Use a props function to access the isClicked prop and set the display rule accordingly.

const CustomStyle = styled.div`
  ...

  .modalpopup {
    display: ${({ isClicked }) => isClicked ? "block" : "none"};
    ...
  }

  ...
`;

An improved design might be to break all the CSS up into several individual style-components, where each can take their own props. You could for example, make the modal div its own component and pass an isOpen prop directly to it to set the style.

Example

const Modal = styled.div`
  display: ${({ isOpen }) => isOpen ? "block" : "none"};          
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
`;

const ModalContent = styled.div`
  background-color: #102037;
  margin: 7% auto;
  position: relative;
  padding: 1% 3% 3% 3%;
  width: 80%;
`;

export function InfoCalon() {
  const [isOpen, setIsOpen] = React.useState(false);

  const toggleModal = () => setIsOpen(open => !open);

  return(
    <CustomStyle isClicked={isClicked}>
      <div class="content-container">
        <button id="button1" class="button" onClick={toggleModal}>
          Button 1
        </button>
      </div>

      <Modal id="modal">
        <ModalContent>
          // Modal Contents
        </ModalContent>
      </Modal>
    </CustomStyle>
  )
}

edited Nov 16, 2021 at 6:06

answered Nov 16, 2021 at 5:59

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

2 Comments

Giga Hidjrika A A Over a year ago

If I were to make another button which opens another modal, does that mean I have to make another copy of toggleModal with a different name?

Drew Reese Over a year ago

@GigaHidjrikaAA Yes, if you want them to function independently.

Collectives™ on Stack Overflow

Changing CSS Attribute on click in React while using Styled Components

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related