How to Add a CSS class to an element onClick with Next.JS

Question

I migrated my app from React to Next Js. The final part I'm confused on is removing/adding classes on click of an element.

Essentially, I have an input element (and some other elements) that is set to display: none by default; on click, it should switch to display: block. This was working in React, but is not working after migration. The actual click event does work when I put an alert() within the function.

PLEASE HELP!!!!

Here is the onClick function:


searchActive = () =>{
if (typeof document !== "undefined"){
const searchForm = document.getElementById(styles["search-form"]);
searchForm.classList.remove(styles["display-none"]);
document.getElementById(styles["search-input-box"]).focus();
document.getElementById(styles["search-icon-id"]).classList.add(styles["display-none"]);
document.getElementById(styles["close-icon-id"]).classList.remove(styles["display-none"]);
      }
    }

UPDATED: This method of using useState also throws a scope error. Component Function:


searchActive = () =>{
const [add, setAdd] = useState("none");
useState("block");
}

JSX:


<input style={{display: add}} onClick = {searchActive}/>

why not use a state and add it based on condition ? something as clicked -> add,setAdd .. then add ? class : "" — KcH
– KcH, Commented Oct 4, 2022 at 19:04
KCH: I've tried the useState hook, but it would require it be inside the function component. With that scope, the variable was undeclared in the JSX. For example, <input style={{display: add}} />......addState would be changed when setAdd() was called in the onClick function, but "add" is outside of the scope — Juiced
– Juiced, Commented Oct 4, 2022 at 19:17

tperamaki · Accepted Answer · 2022-10-04 19:41:04Z

1

The code examples you gave are a bit short, so not sure what's happening there, but here is an example how to use the useState to manipulate style for example. Not the prettiest example, but one, as based on those pieces of code I think you might be using either the hooks or JSX in some incorrect way.

You should have a function that returns JSX, and in that function you should declare the state, or you could provide the state via props or context if needed, if the state is needed higher up in the hierarchy.

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [display, setDisplay] = useState(false);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <button onClick={() => setDisplay((prevDisplay) => !prevDisplay)}>
        Button
      </button>
      <p style={{ display: display ? "block" : "none" }}>something here</p>
    </div>
  );
}

Codesandbox

answered Oct 4, 2022 at 19:41

tperamaki

1,0281 gold badge6 silver badges13 bronze badges

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

1 Comment

Juiced Over a year ago

Worked like a charm! I was receiving a scope era because I was placing the useState hook in an exported class Component ( with a constructor, lifecycle methods). Switched it to a function and worked like a charm! Thanks for sharing!!!

Collectives™ on Stack Overflow

How to Add a CSS class to an element onClick with Next.JS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related