The state of the Toggle Button in Material UI

I am currently working with Material UI's ToggleButton and ToggleButtonGroup components. However, I'm facing an issue where the ToggleButton remains highlighted even after clicking on another button in the group. While the buttons are registering input correctly, I would like them to only show as selected when clicked. Can you help me figure out how to make this work?

handleToggleChange = (date, newValue) => {
    this.setState({
        [date]: newValue
    })
}

<ToggleButtonGroup onChange={(e, value) => this.handleToggleChange("date", value)} name="date" 
id="date-select" exclusive={true} size="small">
                <ToggleButton value="today">Today</ToggleButton>
                <ToggleButton value="tomorrow">Tomorrow</ToggleButton>
                <ToggleButton value="week">This week</ToggleButton>
</ToggleButtonGroup>
javascriptcssreactjsmaterial-ui

Answer №1

One crucial prop you are missing is the "value" attribute:

<ToggleButtonGroup
  value={selectedAlignment}
  exclusive
  onChange={handleAlignmentChange}
  aria-label="text alignment options"
>

It appears that your state is being updated correctly, but the component is unaware of the current selection. Make sure to save the selected value and pass it as a prop.

handleToggleSelection = (e, newValue) => {
    this.setState({
        selection: newValue
    })
}

<ToggleButtonGroup
      value={this.state.selection}
      onChange={handleToggleSelection}
      name="selection" 
      id="select-toggle"
      exclusive={true}
       size="medium">
                <ToggleButton value="option1">Option 1</ToggleButton>
                <ToggleButton value="option2">Option 2</ToggleButton>
                <ToggleButton value="option3">Option 3</ToggleButton>
</ToggleButtonGroup>

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

Unlocking the value of data within a nested object in React: A guide

Recently, I have started working with React and am encountering a challenge in accessing data nested within an object. My goal is to develop an application that compares today's date with the dates in a list, and if the condition is met, display the c ...

javascriptreactjsif-statementreact-hooksjsx

What is the safest method for securely storing sensitive data such as login credentials on the client-side?

I’m currently working with React JS and I'm interested in finding a way to save the user's login details on their browser for convenience. This will help users avoid having to re-enter their email and password every time they visit. What is th ...

reactjssecuritylocal-storageclient-side

Troubleshooting Firebase import issue in Node.js, React, and Chakra UI framework

https://i.sstatic.net/ZPTmf.png Running "yarn dev" in my project directory is causing me to encounter this error. The code in firebaseConfig.js looks like this: // Import necessary functions from Firebase SDKs import { initializeApp } from "firebase/app" ...

javascriptnode.jsreactjs

Combining the power of jQuery, PHP, JavaScript, and the popular WordPress platform, let's unlock

After going through numerous attempts to find answers for similar issues, I'm unable to get any of the suggested solutions to work. My WordPress site requires a plugin that utilizes jQuery. The main file for my plugin is located at wp-content/plugins ...

javascriptphpjqueryajaxwordpress

Dashboard for Decoupled Content Management System with Single Page Application

While conducting research for a new project, I came across the idea of building a SPA application (using Angular) with a headless CMS (which has not yet been chosen). Despite feeling confident in my expertise, there is one key aspect that I am uncertain ab ...

javascriptangularcontent-management-systemfrontendheadless

Transferring information stored in a SQLite database using Python and displaying it in the

I am looking for a way to display data from an sqlite3 database in the front-end of my application when a GET request is made. Currently, I have managed to render the data as a JSON dump using the following code snippet: if self.path == "/stuff" : ...

javascriptpythonjsonsqlitefrontend

What is the best approach to creating an edit-file for combining different types of data in a React

Looking for guidance on updating an article along with an image? I'm currently working with a MERN-stack using Redux Toolkit. After successfully fetching data from the database into input fields using useEffect(), I encountered an issue when trying to ...

reactjsreduxmern

Struggling to customize a CSS navigation menu?

In search of a skilled CSS professional to examine the CSS and HTML code for my website menu. To view the menu in action, visit The main issue is that the sub menus are not displaying on the top level page, but they appear when navigating to specific page ...

htmlcssmenu

Jquery CSS malfunctioning on Post's div element

After retrieving a div using jquery's post method on my page, I am encountering an issue when attempting to apply CSS to the divs. Strangely enough, applying CSS with jquery to divs that are already present on the page works perfectly fine. Javascrip ...

jquerycss

Access information from an array in Angularjs and transfer it to an identifier

I am facing an issue with passing values from the view to the controller and storing them in an array. My goal is to then retrieve a value from the array and pass it as the id value in the update method. Here is my current setup: HTML <label class="c ...

javascriptarraysangularjs

JavaScript failed to execute

I am trying to make the JavaScript function execute when the subcat-tab class is clicked, but for some reason it's not working. There are no error messages showing up, but nothing is happening. This is within a phtml file in Magento 2. <a href=&qu ...

javascriptphpjquerymagentomagento2

The data type "100%" cannot be assigned to a number type in the kendo-grid-column

I need the columns in the grid to have a width of 100%. <kendo-grid-column field="id" title="id" [width]="'100%'"> </kendo-grid-column> However, when I hover over the code, I get this message: The value "100%" cannot be ...

csskendo-uikendo-ui-angular2

Opt for buttons for color selection instead of a checkbox toggle

I attempted different approaches to replace the existing checkbox with a button but encountered difficulty. Using the onClick method also proved unsuccessful. VIEW DEMO HERE: https://jsfiddle.net/yxez4a2u/ HTML: <div class="form-check form-switch ...

javascripttwitter-bootstrapbootstrap-5

Node.js and Express constantly face the challenge of Mongoose connecting and disconnecting abruptly

I have been running an Express (Node.js) app connected to MongoDB using Mongoose for a while now. Everything was working smoothly until recently, when it started acting up. It appears that the server is establishing a connection with MongoDB only to disco ...

javascriptnode.jsmongodbexpressmongoose

What is the best way to make a div expand to the full width of the screen while still being contained within its parent div?

I am facing an issue with the black bar at the bottom of the slider not stretching full-width on the screen. While it works fine on the left, the right side is cut off at the container edge. I am using Master Slider if that's relevant information. Can ...

htmlcsswordpress

The DefaultTheme in MaterialUI no longer recognizes the 'palette' property after transitioning from v4 to v5, causing it to stop functioning correctly

Currently in the process of transitioning my app from Material UI v4 to v5 and encountering a few challenges. One issue I'm facing is that the 'palette' property is not recognized by DefaultTheme from Material UI when used in makeStyles. Thi ...

reactjstypescriptmaterial-ui

Tomcat hosting a dynamic duo: Spring Boot and React!

Exploring the world of Spring Boot application development with a React client using Gradle is an exciting journey for me as I navigate through these new technologies. My current progress includes successfully creating a WAR file that encompasses several i ...

javascriptspringreactjstomcatweb-deployment

The barely noticeable difference of 1 pixel in the link between Chrome and Firefox

Hello there, I need some advice on how to adjust a one-pixel difference between Chrome and Firefox. The menu links appear correctly in Chrome, but in Firefox, they are 1px smaller than they should be. Below is the CSS code: ul#menu { padding: 0 0 2px ...

htmlcssgoogle-chromefirefoxbrowser

What is the reason behind causing the overflow to become visible on the parent anchor when a child anchor is added?

I've been facing a puzzling issue for the past day. I am working on creating a website that resembles Windows 8, where each box represents a list item. The code is more complex than what I have shared here, but the problem seems to be isolated... &l ...

htmlcss

Utilizing the .on() method to select elements based on a unique attribute

It is possible to use the .on() method to attach a single click event to an element and then specify which child elements receive the click. For example: $(this.el).on("click", "span", function () { alert("Bloop!"); }); If you need to be more specifi ...

javascriptjqueryeventsjquery-selectors