Develop Reference

React-Select Creatable prevent user from entering additional options if length of selection is reached

Currently I have a Createable component that has a dropdown menu and users can also freely enter any new value. However I want to disable creating new values if the maximum number is reached.
Here I used a custom menulist component to hide the dropdown (There is still a visible small line here beneath the component tho). But the user can still type, in the input. Is there any way to disable this specifically and not disable the whole component since they should still be able to delete selections.
const CustomMenuList = (props: any) => value?.length === 5 ? null : <components.MenuList {...props} />;

Your logic is generally correct but you need to apply it to the Menu component which is the container for MenuList, that's why you still see something when you hide MenuList
import { components } from 'react-select';
const CustomMenu = ({ children, ...props }) =>
props.options.length === 5 ? null : (
<components.Menu {...props}>{children}</components.Menu>
);
<Select
components={{
Menu: CustomMenu,
}}
/>
As for disabling the input, just follow the same logic and override the input's disabled attribute when options reach 5.

How to use material-ui AutoComplete to filter table using select key from list and manually enter value

I am trying to create filter similar to AWS Dashboard use where we can select filter key like instance state then it renders the key on the input and allow user to enter value and then search for it.
I am trying to create similar functionality using material-ui Autocomplete with multiple. it shows the list and create chip and add to input as I select option but I don't know how to modify that to get what I wanted it to do.
AWS Dashboard
code:
<Autocomplete
multiple
getOptionLabel={(option) => option}
options={columns}
filterSelectedOptions
size={"small"}
style={{ flexGrow: 2 }}
renderInput={(params) => (
<TextField
{...params}
variant={"outlined"}
placeholder={"Filter Items"}
/>
)}
/>

Note : The Below example is not the complete solution. It will help get started/help you to understand the use of AutoComplete material-ui.
This is a sample example which is similar to your problem.
Click here
Material-ui supports developers to customize on top of the component which it provides.
I have encountered similar problem too. Here is how, I was able to solve the problem.
To customize your autocomplete material-ui provides set of props which can we overridden.
Material-ui Autocomplete API
Please find code sample here.
In the above example the input value can be altered/set/updated with the onChange of TextField component.
Similarly on selection of value form the dropdown you can make use of onChange of AutoCompolete component.
Q) How to populate the text box along with filter that is selected?
A) In the above example I am updating the inputValue.
const handleChange = (event) => {
setChecked(event.target.checked);
if (event.target.checked) {
setFilterValue([...new Set([...filterValue, event.target.name])]);
} else {
setFilterValue(filterValue.filter((fv) => fv !== event.target.name));
}
};
Q)How to show options after selecting the filter?
A)In above example I have made use of the filterOptions(Autocomplete prop) which is provided by the Autocomplete.
const filterOptions = (options) => {
const inputOnFilter =
inputValue.indexOf(":") > 0
? inputValue.slice(inputValue.lastIndexOf(":") + 1, inputValue.length)
: inputValue;
if (inputOnFilter)
return options.filter((option) => option?.includes(inputOnFilter));
return options;
};

How to autofocus select input after async call?

I'm using Material UI's Autocomplete component, and I'm running into an issue. I have a debounced API call that is made when a user starts typing, and I disable the text input field while the call is being executed.
The issue is that disabling and then enabling the text field makes the text input lose focus. I've tried giving it an ID and grabbing it in the DOM and running .onFocus(), but that a) didn't work and b) isn't very React-y.
I also tried to add a useRef hook, but that didn't work either.
Any thoughts/suggestions?
Codesandbox

Hey you can add inputRef prop and then just wait until it is done loading. Here is exmaple:
const inputComponent = React.useRef(null);
return (
<Autocomplete
{/* ... */}
renderInput={params => (
<TextField
{/* ... */}
InputProps={{
{/* ... */}
inputRef: inputComponent,
{/* ... */}
}}
/>
)}
/>
);
And then I am guessing that you tried to focus element while it was still disabled, I guess a little race condition. You can add useEffect that is dependent on open and loading like this:
React.useEffect(() => {
if (!loading && open) {
inputComponent.current?.focus();
}
}, [loading, open]);
Here is the link to sandbox with it. Cheers, hope it helps.
P.S I don't think it is a good idea to disable the field while options are loading, it won't feel smooth for the user :)

How to navigate to a specific users profile page after selecting him/her from a list of multiple users?

How do I code this functionality in react-native?
eg. In Instagram when you go to your followers' page, you can view a whole list. You can tap on any of them and you will navigate to that user's specific profile.
I was wondering if it has something to do with React-Navigation like passing some unique id or code, but I am still unclear, please help me out.
P.S I am using cloud firestore from firebase as my database.

The way I would do this is as follows:
1) Create a FlatList:
<FlatList
data={//list of users}
renderItem={this.renderList}
keyExtractor={(item, index) => index.toString()}
/>
2) Every element in the FlatList is a custom component. Navigation props is also passed to the component along with the data. The handler function for renderItem is given below:
renderList = ({ item }) => (
<UserSummary data={item} navigation={this.props.navigation} />
);
3) UserSummary is in fact a Touchable element (say Touchable Opacity) and the onPress event handler for that is given below:
onPress={() =>
props.navigation.navigate("UserDetailsScreen", {
userDetails: props.data
})
Note that I have also passed some data along with the navigation. Let's say, it's some userID that is unique. This information can be used in the UserDetailsScreen to render the details of the user.
Hope this will give you an idea.

you can refer this link. You can pass id as parameter as this.props.navigation.navigate('RouteName', { /* params go here */ }) .

Radiobuttons with the same name React

I'm trying to create a radiobutton component, and it's causing me some headaches.
This is my code:
class RadioButton extends React.PureComponent {
constructor(props) {
super(props);
this.state = { selected: '' };
}
handleRadioButtonChange = event =>
this.setState({ selected: event.target.value });
render() {
const { disabled, label, name, value } = this.props;
const { selected } = this.state;
return (
<StyledLabel>
<RadioButtonComponent
id={value}
name={name}
value={value}
checked={selected === value}
disabled={disabled}
onChange={this.handleRadioButtonChange}
/>
<span>{label}</span>
</StyledLabel>
);
}
}
RadioButtonComponent is something I use to style the radiobutton the way I want.
const RadioButtonComponent = ({ checked, ...props }) => (
<RadioButtonContainer>
<HiddenRadioButton checked={checked} {...props} />
<StyledRadioButton checked={checked}>
<Icon viewBox="0 0 24 24">
<circle />
</Icon>
</StyledRadioButton>
</RadioButtonContainer>
);
The HiddenRadioButton is the input with style "radio" and it's hidden with the hideVisually function from the polished library. The StyledRadioButton is a styled components div that is styled to make it look the way I want.
It works to the level that they are displayed, can be clicked and they toggle on. Obviously they can't be toggled off. But when I create say 2 checkboxes with the same name:
<RadioButton value="1" name="group" />
<RadioButton value="2" name="group" />
I can select both. I would expect one to switch off and the other on.
When I change RadioButtonComponent to input type="radio" it works, but doesn't look the way I want. Also, it seems like I have to click it twice to select it.
Any ideas what might be wrong?
EDIT:
If I unhide the html checkbox, it does toggle. But StyledRadioButton doesn't get the right 'checked' state?
Codesandbox: https://codesandbox.io/s/j5zorwr3v

I'm not sure I understand why you have four components in order to achieve this, but I see one area causing unnecessary complication - you are trying to implement radio buttons as individual components, when actually radio buttons are more akin to select drop down menus. You would have multiple values, but only one is "selected", and only one value is stored in state.
You could break out each radio to it's own component, but then you'd have to manage selected state across multiple components, and I believe this is where you could optimize your code. See this Code Sandbox:
https://codesandbox.io/s/9jjwwzwoxw
This is the simplest working example I could come up with. Note that we provide the various values to the single component, then map over the values to create each radio button.
Also note that you can apply your style customizations to a component within the map, which is different than trying to manage selected state across multiple radio components.
Edit: I've added an example of how to add a className and CSS styling within each radio to determine which elements is checked.