im new to React / Typescript. I just want to store the options that a user chose at the Autocomplete component. After that, i'd need to send the chosen values to an API. How do i do this?... Code: <Autocomplete…
I have written two component. One for rendering a list which is used inside it's parent component hosting the Select component provided by Material UI. THe snippets for the both are below. import React from 'react'; import './index.css'; import {…
I have this Autocomplete component <Autocomplete filterOptions={(x) => x} options={items} getOptionLabel={(option) => `${option.code} - ${option.name}` } onInputChange={(e, value) => { console.log(value); setAutoComplete(value); }} onChange={(e, value) => { //Change state of some other fields }} noOptionsText={false} renderInput={(params) => ( <TextField {...params}…
I am trying to setup a regestration form with MUI Fields and the input Field for a date does not work propably. When I enter a date days and month a passed on correctly but when it comes to the…
the button is working but the icon inside it is not working: the button code: <Button color="secondary" aria-label="add an alarm"> <AlarmIcon></AlarmIcon> </Button> <Button variant="outlined" startIcon={<AlarmIcon />}> Delete </Button> the button imports: import Button from '@mui/material/Button'; import AlarmIcon from '@mui/material/Icon'; the…
This is my code for check box in react. Its from Material-UI const [checkmark, setCheckMark] = useState(false); const [selectedRows, setSelectedRows] = useState([]); const toggleAllCheck = (event) => { console.log("before", checkmark); setCheckMark(!checkmark); console.log("after", checkmark); let newSelectedRows; if (checkmark) { newSelectedRows =…
I am using an external react component that is imported into my nextjs app code, this is how the component looks like <AppBar className={clsx(classes.header)}> </AppBar> export const header = makeStyles((theme) => ({ header: { [theme.breakpoints.down('md')]: { padding: `0 ${theme.spacing(4)}px`, },…
In tailwind why does bg-[#5ad0a1] work, however assigning the hex to variable for example const color = '#5ad0a1'; then bg-[${color}] not work? <span className={`inline-flex items-center rounded-md bg-[${color}] px-2 py-2 text-md font-base text-[${color}]`}> {params?.value} </span>
I currently have a react-hook-form with some fields. One field is a <TextFields /> from mui/material (Link). This one is of type "number" and I want to hide the arrows from the number input. Code Code snippets from my DynamicFormComponent.tsx…
Just as the title says, I've been trying to get this done, but for the life of me I don't know which Material UI css class manipulate to get this done. I have tried playing around with the InputLabelProps (shrink…