I want to display only the number of selected options in the value container in React-select and not the options themselves. I tried the following approach, but it ripped off the feature to search and open/close the dropdown while clicking the value container. Maybe I'm overwriting the complete configuration. I'm not able to figure out from the docs on how to retain the other configurations while changing only the display types.
const vc=(props)=>{
return(
<div {...props}>
{selectedOptions.length}
</div>
);
}
<Select components={{ValueContainer:vc}}/>
Related
I am building a React app with a hefty search functionality. Essentially, I need to conditionally render Radio buttons based on other Radio buttons input. I am using the MUI library for Radio buttons.
Here's an example of the type of functionality that I need
if (value === 'Option1') {
return <Option1Radios />
}
I know this has to do with useState, so the actual code will look nothing like the above example, but that's the best way I can explain what I'm looking for.
Currently, I have the basic set of radio options that are necessary for all searches at the top. When the user reaches the 3rd set of radio buttons, I need to take their choice in those radio buttons, and render a large selection of radio buttons based upon that 3rd selection. My current plan is to create components for each set of radio buttons that can appear, and then set it up to render those components when the proper button is checked (Option1Radio component, Option2Radio component, etc.)
Example.js
<Form.Row>
<FormControl>
<FormLabel id="demo-row-radio-buttons-group-label">Options</FormLabel>
<RadioGroup
row
aria-labelledby="demo-row-radio-buttons-group-label"
name="row-radio-buttons-group"
>
<FormControlLabel value="Option1" control={<Radio />} label="Option1" />
<FormControlLabel value="Option2" control={<Radio />} label="Option2" />
<FormControlLabel value="Option3" control={<Radio />} label="Option3" />
</RadioGroup>
</FormControl>
</Form.Row>
I have been looking for a resource on how to conditionally render Radio buttons in this way, but I've been unable to find anything. I would imagine there is some resource that shows me the proper way to set these up, so ideally if someone could link me to that (or even just a website that has implemented this type of searching that I could inspect,) that would be very helpful. If not, if someone could possibly give a code example on how to get this done I would greatly appreciate it.
My assumption on how this needs to be done:
I assume that in my main search page, I need to set the state of the search form.
I assume that I need to change the state of the search form to reflect the value of the specific radio option, so that it will render the appropriate set of options.
Thank you for the help and I'm happy to provide anything else that may help. I know this may seem like a ridiculous question, essentially asking for documentation/guide, but I have searched for a few hours now to no avail! Thank you again!
You can do conditional rendering like this:
Define the state to control the rendering:
const [contition, setCondition] = useState(false);
This code only displays <Option1Radios /> when your condition is true:
return {condition && <Option1Radios />};
Here is an article about it: https://medium.com/geekculture/stop-using-for-conditional-rendering-in-react-a0f7b96200f8. ps: I still prefer && syntax specially in TypeScript where you can ensure the variable is always a boolean.
I'm using MUIv4 and built the following table component which show some actions on hover.
UI Before Hover
UI After Hover
Now I want to shift to MUI v5 Datagrid to replace this component. But could not find anything that could fulfill my design need i.e show actions on hover. Is there any way to do this on Datagrid component?
Link of MUI5 DataGrid with somehow desire result
Note: I want to show the action on one row at a time like in gmail
Just give me the code: https://codesandbox.io/s/datagridprodemo-material-demo-forked-63c9j?file=/demo.js:699-864
You can use renderCell with Chip like this:
renderCell: (params) => {
return (
<Chip variant="outlined" size="small" label={params.value} />
);
}
As you are requiring some GMail like interface try setting the icon property of Chip. Reference: https://github.com/mui-org/material-ui/blob/v5.3.0/docs/src/pages/components/chips/IconChips.js
And it looks something like this:
You could check this documentation about migration from v4 to v5 https://mui.com/components/data-grid/migration-v4/#removed-props.
There are some removed props related to hover event: onCellEnter, onCellLeave, onRowEnter, and onRowLeave. The developer said that they removed the props for better performance https://github.com/mui-org/material-ui-x/issues/3799.
You could also check this documentation https://mui.com/components/data-grid/components/#row for the implementation examples when the mouse cursor enters or leaves the row or this documentation https://mui.com/components/data-grid/components/#cell when the mouse cursor enters or leaves the cell.
I want to show the menus outside the table, I tried using position:"absolute" in menu:styles, but didn't work.
<Select styles={customStyles}
onChange={handleChange}
options={options}
autoFocus={true}
>
You want to read the documentation on Portaling. Currently your menu is confined to it's container element, which is why you're seeing what you're seeing.
I am creating a table with data. Want pagination like this attached image in the footer.
Left-hand side I want the numbers and right-hand side Results per page.
Probably you have to use the combination of Pagination and Table pagination. And hide the unused panels with the CSS.
<div className={classes.root}>
<Pagination count={10} variant="outlined" shape="rounded" />
<TablePagination
component="div"
count={100}
page={page}
onChangePage={handleChangePage}
rowsPerPage={rowsPerPage}
onChangeRowsPerPage={handleChangeRowsPerPage}
/>
</div>;
I have created a sample codesandbox (This is just a workaround) - https://codesandbox.io/s/material-demo-forked-wmm4z?file=/demo.tsx:891-1225
Let me know if you need more help.
As #Tejogol mentioned you can use the Material UI table example pagination and change it.
You can store the current page number in a state variable and add a different style to the corresponding navigation field. The style seems like a simple border with a small border radius (1-3px).
For the results per page you can use React spacers. Don't forget to update the current page number when changing the results per page.
I am implementing the Autocomplete material ui widget in my webApp, but the drop down is rendering behind my edit panel. I can use my arrow keys to select options, but I can't see the pop up. If I remove either of the following css property {position: "fixed"} or {"z-index": "2000"} it works, but my edit panel will no longer look correct. So it seems that I need to be able to set the zindex of the drop down to 2001 or some thing, but i am unsure as to how or if this is the best solution.
Also I am trying to set the initial value of the dropdown box to "ACCU-SEAL 35-532 Bag Sealer" but get the following error:
Material-UI: the 'getOptionLabel' method of Autocomplete returned undefined instead of a string for "ACCU-SEAL 35-532 Bag Sealer".
so I tried to add the following to my Autocomplete:
getOptionSelected={(option, value) => option.label === value}
but I get the same error.
I have an example of my code up here:
https://codesandbox.io/s/material-demo-fv075?file=/formElementsEdit.jsx
You can use the disablePortal prop to make sure that the menu will be rendered under the current node:
<Autocomplete
....
disablePortal
....
/>