i'm having a little issue here and i need your help.
I want to render a select field with chip inside of it. I successfully implement this but i'm having a little issue. When i click in one of my chip inside the dropdown the dropdown text is showing nothing. I add the propery primaryText inside the menu item and the value is shown successfully but not with the way i wish. Here is a screenshot:
And here is my code:
<MenuItem
key={id}
value={id}
style={styles.scroll}
primaryText={id}
>
<Chip
key={id}
style={styles.chip}
onClick={() => customerSessionSelector(id)}
onRequestDelete={() => handleRequestDelete(id)}
>
{id}
</Chip>
</MenuItem>
For not showing the text under the chip i remove the primaryText property but when i select the value the value is now showing? Any ideas of how to achieve something like this?
Related
I am building a React application and using react-final-form library. I am rendering a select component, but on selecting an item it doesn't get selected. On selecting again, then only it gets selected. I'm not sure why select component state is not getting changed ? Could anyone please check and assist.
Here is the code sandbox link : https://codesandbox.io/s/broken-sunset-9ogwc8?file=/src/Components/Actors.jsx
Regards.
In your NativeSelectField.jsx, change the onChange handler as below:
<NativeSelect
...
...
onChange={(event) => {
input.onChange(event.target.value);
}}
...
...
/>
Working Demo
I am trying hard to customize option elements in autocomplete list. I want to do this by use of renderOptions prop, where i can create DOM elements. Then, i can pretty easly add styles with sx or styled components.
But something is wrong. When i try to render options list elements wrapped in divs, the names of the movies are hidden (?)
They are rendered, because i can still choose option, and after that it is showned as selected, but the input list is still broken, and CSS styles are not applied.
What I am missing ? Autocomplete and its styling is new for me.
The code:
<Autocomplete
freeSolo
id="free-solo-2-demo"
disableClearable
options={top100Films.map((option) => option.title)}
renderOption={(props, option) => {
return (
<li {...props}>
<div
sx={{
backgroundColor: "red",
color: "orange"
}}
>
{option.title}
</div>
</li>
);
}}
renderInput={(params) => (
<TextField
{...params}
label="Search input"
InputProps={{
...params.InputProps,
type: "search"
}}
/>
)}
/>
</Stack>
);
}
Heres the demo : https://codesandbox.io/s/freesolo-material-demo-forked-dupxol?file=/demo.js
TL;DR Just change option.title to option in renderOption prop. And use Box instead of div to apply styles.
I couldn't find it stated in documentation explicitly but apparently each of the elements passed to options is then passed to renderOption as option argument.
So since you already pass array of option.title strings to options you will need to refer to them just as option in renderOption prop.
The sx prop is used by MUI components. So please change div to MUI Box component inside renderOption. The Box was created specifically for such cases.
I want to create cards with the radio buttons functionality, when a card is clicked it should show it as "selected" and remove the "selection" from the one that has been previously selected.
Any idea how to do it?
I am using the antd components.
Thanks in advance, if you need any extra code snippet just please let me know.
AntD Radio.Button accepts children so you can just try to give it a Card component.
I did something similar with a custom Icon
<Radio.Group
size="large"
buttonStyle="solid"
className="large-icons"
>
<Radio.Button value="Canine">
<CustomIcon type="cute-dog" />
Canine
</Radio.Button>
<Radio.Button value="Feline">
<CustomIcon type="nice-cat" />
Feline
</Radio.Button>
</Radio.Group>
Hi I am trying to change a state in my component when there is a click event on a particular chip rendered in the search bar. Is that possible to do?
I am aware of the multiValue multiValueLabel and I can for example change the background color of the chip with that, so I thought I could use those tags to change the state but I didn't have any luck.
I have attempted to find a solution with isSelected tag but I am always reading undefined in the states.isSelected when console.logged it.
I feel like I need a onClick() functionality somewhere but I can't figure it out. A bit of a guidance would be much appreciated!
I am sharing a live code here so maybe we can discuss over it.
if you want to validate if an option is selected you could use the prop: isOptionSelected
or
const onChange = selectedOptions => setSelected(selectedOptions);
with props
isMulti
value={selected}
onChange={onChange}
components={{
MultiValue: SortableMultiValue,
}}
You can attach onClick listener in MultiValueLabel component
<Select
isMulti={true}
components={{
MultiValueLabel: (props) => {
return (
<div onClick={() => console.log(props.data)}>
<components.MultiValueLabel {...props} />
</div>
);
}
}}
{...}
/>
Live Demo
I'm using Ant Desing Radio with react js for creating a radio button. and i create a Radio button like this with map function :
<RadioGroup onChange={this.setActivityType} defaultValue={this.props.activityTypes[0].value} size="large">
{this.props.activityTypes.map((type,i)=>(
<RadioButton key={i} value={type.value} >{type.name}</RadioButton>
))}
</RadioGroup>
also in onChange={this.setActivityType} function i can see e.target.value that is passed as value={type.value} i also need name of between tag of <RadioButton> , the {type.name} but i can't see any properties in developer tools or antd docs ? dose anyone know how to access this property and save it to state with onChange?
To access the name of each RadioButton define a name property with each RadioButton like this:
<RadioButton key={i} value={type.value} name={type.name}>{type.name}</RadioButton>
Now inside onChange method access that name by e.target.name.