Getting text of Radio in Ant.desing and React.js - javascript

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.

Related

How to style list option in Autocomplete material ui with use of renderOption?

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.

Handling onChange event for MaterialUI drop down element

I'm trying to validate the MaterialUI TextField (Country list) component wrapped with Autocomplete using onChange event and use it to enable the Submit button if the field (the country) is filled in. But I'm facing an issue once I'm not entering the country name by hands but selecting it from the dropdown. It looks like onChange event does not see the change in case of selecting from the drop down. (Sorry for formatting issues)
// countries: [a,b,c,d];
<Autocomplete
options={countries as CountryType[]}
<TextField
onChange={(event)=>{setFormValue({
...formValue,
country: event.target.value
})}}
/>
After this I'm using it on enabling the button:
<Button
disableElevation
disabled={formValue.country===""}
>
Submit
</Button>
Would be very appreciated on some suggestions.
While TextField's onChange method is obviously handling changes of the TextField. It doesn't fire on value selection. You're better off removing TextField's onChange handler and assign onInputChange property of the Autocomplete component that does exactly what you're looking for:
<Autocomplete
id="combo-box-demo"
options={countries}
...
onInputChange={(_, value) => {
setFormValue({
...formValue,
country: value
})
}}
renderInput={(params) => (
<TextField ... /> {/* without onChange handler */}
)}
/>

Using Controller component of react-hook-form doesn't allow custom Antd Select to show label

I'm using Antd Select component to build a custom component which gives me the ability to return an object instead of a primitive value and show nested value in object item in the select dropdown options, it works fine and it can be validated using react-hook-form :
<Form.Item ... >
<SpringSelect style={{ width: "200px" }} options={departments} placeholder="Department 2"
name="department2" onChange={e => {setValue("department2", e);}}/>
</Form.Item>
This also works with Controller component however it doesn't show the label inside the select input :
<Controller as={<SpringSelect style={{ width: "200px" }} />}
placeholder="Department 1" name="department1" options={departments}
onChange={([e]) => {return { value: e };}} control={control} />
for more details check the whole code in the codesandbox playground
I think the problem is due to your SprintSelect innerProps
have a look my CSB below:
https://codesandbox.io/s/suspicious-platform-tlr55
<Select onChange={props.onChange}>
When the component is inside the controller a value prop is send to it. And your are just deleting the onChange and onBlur from the props.
Select will use this prop value, but it's a object, that is why it doesn't show the label.
To fixed you can just delete delete tmp.value; before add the props to innerProps
Exemple: https://codesandbox.io/s/vibrant-river-8r4dt
I place a console.log, as you can see department1 has a value field

React Native get Clicked(pressed) component's attribute

I'm making some dynamic CardView which can show videos like as Facebook.
But there's problem when I press share button and comment button.
Because I need the clicked button's(share, comment) index.
So I think I can use the key prop of button.
I make buttons with touchableOpacity, then I'll set key of touchableOpacity
like this.
<TouchableOpacity
key = {some index}
>
some stuffs
</TouchableOpacity>
Then, I want to get pressed component's attr value( key value at here )
I can find the key value at
ReactNativeComponentTree.getInstanceFromNode(event.nativeEvent)
But this data always show my key is null.
There's no way to get clicked Component's key value?
Thanks for reading.
If you really need the index in the onPress handler, you can create a new inline function and pass along the index instead.
Example
<TouchableOpacity
key={someIndex}
onPress={() => this.handlePress(someIndex)}
>
some stuff
</TouchableOpacity>

Chip inside select field in material ui and react

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?

Categories