score:1
Accepted answer
try defaultvalue prop, or defining with or operator
import * as react from "react";
import { typography, togglebutton, togglebuttongroup } from "@mui/material";
export default function togglebuttons() {
const data = [
{ name: "a", title: "hello1" },
{ name: "b", title: "hello2" },
{ name: "c", title: "hello3" }
];
const [select, setselected] = react.usestate<string | null>("");
const handletoggle = (
event: react.mouseevent<htmlelement>,
newselect: string | null
) => {
if (newselect !== null) {
alert(newselect);
setselected(newselect);
}
};
return (
<togglebuttongroup
value={select || "hello1"}
exclusive
onchange={handletoggle}
defaultvalue={"hello1"}
aria-label="text alignment"
>
{data.map((d, i) => (
<togglebutton key={i} value={d.title} aria-label="left aligned">
<typography>{d.name}</typography>
</togglebutton>
))}
</togglebuttongroup>
);
}
score:0
you need to have an active prop in the togglebutton. and also need to add the value of the selected button in the data object.
import * as react from "react";
import { typography, togglebutton, togglebuttongroup } from "@mui/material";
export default function togglebuttons() {
const data = [
{ name: "a", title: "hello1", active:true},
{ name: "b", title: "hello2" , active:false},
{ name: "c", title: "hello3", active:false }
];
const [select, setselected] = react.usestate<string | null>("");
const handletoggle = (
event: react.mouseevent<htmlelement>,
newselect: string | null
) => {
if (newselect !== null) {
setselected(newselect);
}
};
return (
<togglebuttongroup
value={select}
exclusive
onchange={handletoggle}
aria-label="text alignment"
>
{data.map((d, i) => (
<togglebutton key={i} value={d.title} aria-label="left aligned" selected={d.active}>
<typography>{d.name}</typography>
</togglebutton>
))}
</togglebuttongroup>
);
}
Source: stackoverflow.com
Related Query
- How to default select mui togglebutton on dynamic data
- How to set default value in material-UI select box in react?
- How to use MUI Select with react-hook-form?
- React Select - How to show / iterate through data from api call in option instead of hardcoding options?
- How to put a dynamic data from firestore in the function where() and also use the snap.size to count the total query to be passed in a graph?
- How to show the first item by default in a dynamic Antd form?
- How can I get dynamic data from within gatsby-config.js?
- how to set default value in select using react js
- How to fetch data in react server side rendering based on dynamic routing path
- How to add dynamic link to table data
- How do I set a default value for a select menu in my React form component?
- How to give default value and placeholder to redux form select field?
- How to get a data after react select using axios and ReactJS?
- How to push dynamic columns and row data to antd table
- How to populate select dropdown elements with data from API - ReactJS
- MUI Select | Change how the selected value display in Input
- How to customize the select drop down MUI paper CSS
- How to set default value of react-select after getting data from API
- How do I dynamically insert html table cell data into a table with dynamic headers in React?
- How to set the default react context value as data from firestore?
- React - how to populate one select menu based on a value of another select menu using data from a local .json file
- How to display dynamic data in Material-UI table?
- how to add dynamic columns in fixed data table
- How do I change the default background color of notistack in MUI v5?
- How to change the background color of MUI Menu Popover of TextField with select property?
- ReactJS: How do i set default api data on Page Load?
- How to reset value of select box to default in react
- How to make a dynamic progressbar with data received from an api
- How to display dynamic default value in field of Strapi collection page?
- How to make a select input that is dependent on other inputs to always show a default value in React?
More Query from same tag
- How to style function-plot.js
- VS Code: Generate boilerplate code when creating a new component
- React children[] issue with TypeScript
- JS: shorten search results by the words, which were found
- Input Checkbox Values to Array in React
- Apply JSON to TextFields or Selects based on a value in the JSON
- conditional statements inside render
- How to implement React route?
- How can I set icon size in react
- Cannot use MUI 'ContentCopy' icon
- Generate Route dynamically - React
- Very high memory/cpu usage while testing React components with Karma in Chrome
- How to set state of container component from its child in reactjs and reflux?
- How to set state in react whith the content at a certain index from an array
- map an array to table where one of those column should be mapped with another array
- Why Firebase user is not authenticated anymore when refreshing?
- How do I connect to RabbitMQ from my ReactJS application?
- React Route - Rendering component in route from string in JSON object
- Enforcing vertical size in Grid component
- Passing arguments to action
- React Demo - Installation Failed : Incorrect integrity when fetching from the cache
- Typescript seems to miss interpret a class/type as value "'Classname' refers to a value but is used as type here"
- POST request error: Path `title` and `body` are required
- Can't access my state in my requestAnimationFrame function
- React setState in useEffect causes infinite render cycle
- Config Vars from Heroku and Webpack
- How to unit test promise rejection in React and Jest
- How to use params to react router dom link
- How to wait until context value has been set | React Hooks
- React. onClick event not firing