Is there a way to implement the onClick event within a styled component?

I am experiencing an issue with styling in my code. I want to describe the problem using images. Essentially, when clicking on an image button, I expect the MenuItemContainer to become visible.

const MenuItemContainer = styled.div`
  visibility: hidden;
  display: inline-block;
  box-sizing: border-box;
  width: 200px;
  padding-left: 16px;
  padding-right: 16px;
  border: 1px solid ${({ theme }) => theme.palette.lightBlueGrey};
  border-radius: 5px;
  box-shadow: 0 12px 24px 0px ${({ theme }) => theme.palette.dark15};
`;

const ProfileNameWrapper = styled.div`
  display: flex;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 25px;
  background-color: ${({ theme }) => theme.palette.darkGreyBlue};
  cursor: pointer;
  justify-content: center;
  align-items: center;
  &:hover ${TooltipText} {
    visibility: visible;
  }
  &:????? ${MenuItemContainer} {
    visibility: visible;
  }
`;

Is it acceptable to use onClick in this scenario?

 &:????? ${MenuItemContainer} {
    visibility: visible;
  }

javascriptcssreactjstypescriptstyled-components

Answer №1

Although I typically avoid attaching click events to divs, a workaround using aria attributes can help solve your issue.

const UsernameContainer = styled.div`
  ...
  &:[aria-expanded='true'] ${NavigationMenu} {
    display: block;
  }
`

const CustomComponent: React.FC<CustomProps> = (props) => {
  const [isExpanded, setExpanded] = React.useState(false)
  return (
     <UsernameContainer onClick={() => setExpanded(!isExpanded)} aria-expanded={isExpanded} />
  )
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Instructions for opening a URL in a new tab using Angular

Within my Angular 10 application, I am conducting an API call that retrieves an external URL for downloading a pdf file. Is there a method to open this URL in a new browser tab without relying on the window object? I've been using window.open(url) suc ...

angulartypescript

Angular 2: Embracing the Power of Hierarchical Selection

My goal is to create cascading selects where each option in a dropdown menu can lead to its own set of unique child options. This will result in a hierarchical structure of selectable items. To accomplish this, I have defined a class named fieldSelect tha ...

typescriptangular

``Can you provide step-by-step instructions on how to delete a particular item from

Currently, I am in the process of developing a simple comment list application using JavaScript and local storage. I have completed all the necessary details, but now I need to figure out how to remove a specific item that was created by the application ...

javascripthtmllocal-storage

Customizing HTML forms using WordPress Divi's custom CSS techniques

I have a WordPress website that I'm customizing with the Divi theme. I've successfully added an HTML form to a 'Code' module and it's functioning well. However, I am struggling to determine where I should place the CSS code. I&apos ...

csswordpress

I am having trouble getting two similar Javascript codes to function simultaneously

Using a common JavaScript code, I am able to display a div when a certain value is selected. http://jsfiddle.net/FvMYz/ $(function() { $('#craft').change(function(){ $('.colors').hide(); $('#' + $(this ...

javascriptjqueryhtmlcss

Using Axios and Typescript to filter an array object and return only the specified properties

I'm currently working on creating an API to retrieve the ERC20 tokens from my balance. To accomplish this, I am utilizing nextjs and axios with TypeScript. However, I'm encountering an issue where the response from my endpoint is returning exces ...

javascripttypescriptaxiosnext.js

Is it possible to make a div jump or bounce if it has a flex display?

I'm looking to add some interactive animation to an image inside a div when my mouse hovers over it. To better explain the issue I'm facing, I created a quick representation of what I want to achieve in the code below. My goal is to have the te ...

javascriptjqueryhtmlcssflexbox

Create a Vue extention with personalized settings

Looking to create a Vue plugin with custom options? Following the official Vue guidelines at https://v2.vuejs.org/v2/guide/plugins.html, but struggling to define those custom options that can be accessed by regular JavaScript which then exports an object u ...

javascriptvue.js

JSON serialization fails due to cyclic structures causing an error

Looking at the data object structure displayed in the Safari console, here is what I see: _Api (2) 0 {company_code: 64, clerk_code: "RO", clerk_name: "Akshay", list_a: 1, list_b: 0} 1 {company_code: 64, clerk_code: "SA", clerk_name: "Lokur", list_a: 0, li ...

javascriptjqueryjsonajax

Struggling to resolve a common issue in Migration? It seems that a raw query in Sequelize is adding backslashes that are causing errors when inserting values into the database

During migration, data is taken from one table and inserted into another. However, an issue arises when Sequelize adds backslash escape characters to the 'v_occupation' value, causing insertion errors. I have attempted various replacements and m ...

javascriptmysqlnode.jssequelize.js

Updating Kendo by modifying the Angular model

While working on a project with Angular, I recently discovered the Kendo-Angular project available at . I successfully integrated Angular-Kendo into my project and it seems to be functioning well, except for updating models in the way I am accustomed to. ...

javascriptangularjskendo-uiangular-kendo

Proportion of mongoose in the overall count

I am working with a model that has the following structure: Model : createdAt: { type: String, default: Moment(new Date()).format('YYYY-MM-DD') }, loginTrack: [ { user_id: { type: mongoose.Schema.Types.ObjectId, ref: 'Users&ap ...

javascriptnode.jsmongodbmongooseaggregation-framework

Alignment issue with Bootstrap navbar hamburger icon in vertical positioning

I am currently utilizing fluent kit with bootstrap version 4.1.2. After referring to the navbar documentation (specifically interested in the toggler that changes its icon when opened/closed), I chose the second example from the #position section. However ...

htmlcssbootstrap-4fluent-kit

What is the best way to prevent a folder from being included in the next js build process while still allowing

I am faced with a challenge involving a collection of JSON files in a folder. I need to prevent this folder from being included in the build process as it would inflate the size of the build. However, I still require access to the data stored in these file ...

javascriptreactjsjsonnext.jsbuild

The radio button's on click event necessitates a double click

At the heart of my issue are two radio buttons within a form. One triggers a registration form for new users, while the other allows already registered users to sign in. To aid with validation, I've integrated jVal form validation. The problem arises ...

javascriptjquery

Updates in React Mobx's componentDidUpdate aren't occurring as expected when an observable value changes

I am diving into Mobx and reactjs for the first time, coming from a background in Redux and React Native. In Redux, when I used to call an action and the props were updated, the componentDidUpdate lifecycle method would be triggered. Currently, I am facin ...

reactjsmobxmobx-react

Struggling to customize the style of bootstrap components

Struggling to get my custom css to take precedence over Bootstrap4 components in my Django project. I'm a beginner in front-end development and I'm hoping to articulate my question clearly. Note: This is an HTML sheet within a Django project. My ...

cssdjangobootstrap-4frontend

The module.run function in Angular is invoked with each individual unit test

Hey there I am currently working on setting up jasmine-karma unit tests for my angular app. The problem arises in my app.js file where the module.run method is calling a custom service (LoginService) that then makes a call to the $http service. The issue ...

javascriptangularjsunit-testingkarma-jasmine

Obtain the clicked href value and pass it from one page to another

Welcome, everyone, I am currently in the process of creating a webpage that serves the following functions: When the administrator accesses the page, they will see a form populated with information fetched from a database: https://i.sstatic.net/RrE9l.png ...

javascriptphpjqueryhtmlmysql

Utilizing AJAX with jQuery in Laravel 5

I am currently utilizing Laravel 5 for my project and I am implementing filters on some collections in my controller. The challenge I am facing is integrating AJAX as the intermediary between the blade template and Controller. Below is the jQuery code I am ...

javascriptphpjqueryajaxlaravel