Clash Royale CLAN TAG#URR8PPP

Material ui autocomplete with react-select to fetch db on every search

I am currently using Material ui v1.4.3 autocomplete. Material UI stated that this autocomplete is integrated with react-select.

I have followed the code here which is working like a charm but in order to handle fetching larger data in the future, I would like to implement the search function to call the database whenever the input changes so that I am able to narrow down the data that is being fetched from the database.

Has anyone had experience on this? Because the static method from this code is blocking me to call any reducer function that is passed from my parent component.

What would be an appropriate way that allows me to catch the input from the user so that I am able to call my function.

function NoOptionsMessage(props)
return (
<Typography
color="textSecondary"
className=props.selectProps.classes.noOptionsMessage
...props.innerProps
>
props.children
</Typography>
);


function inputComponent( inputRef, ...props )
return <div ref=inputRef ...props />;


function Control(props)
////console.dir(props.selectProps.inputValue); i am able to get the user input here
// so i was thinking i can call my reducer somewhere here but no luck
// my function is passed from my parent component so i wish to call this.props.theFunction here
return (
<TextField
fullWidth
InputProps=
inputComponent,
inputProps:
className: props.selectProps.classes.input,
ref: props.innerRef,
children: props.children,
...props.innerProps,
,

onChange=(e) => IntegrationReactSelect.testing(e)
/>
);


function Option(props)
return (
<MenuItem
buttonRef=props.innerRef
selected=props.isFocused
component="div"
style=
fontWeight: props.isSelected ? 500 : 400,

...props.innerProps
>
props.children
</MenuItem>
);


function Placeholder(props)
return (
<Typography
color="textSecondary"
className=props.selectProps.classes.placeholder
...props.innerProps
>
props.children
</Typography>
);


function SingleValue(props)
return (
<Typography className=props.selectProps.classes.singleValue ...props.innerProps>
props.children
</Typography>
);


function ValueContainer(props)
return <div className=props.selectProps.classes.valueContainer>props.children</div>;


function MultiValue(props)
return (
<Chip
tabIndex=-1
label=props.children
className=classNames(props.selectProps.classes.chip,
[props.selectProps.classes.chipFocused]: props.isFocused,
)
onDelete=event =>
props.removeProps.onClick();
props.removeProps.onMouseDown(event);

/>
);


const components =
Option,
Control,
NoOptionsMessage,
Placeholder,
SingleValue,
MultiValue,
ValueContainer
;

class IntegrationReactSelect extends React.Component
state =
single: null,
multi: null,
;

handleChange = name => value =>
this.setState(
[name]: value,
);
this.props.getSelectMultipleValue(value);
;

render()
const classes = this.props;
return (
<div className=classes.root>
<Select
classes=classes
options=this.props.theUserFromParentComponent
components=components
value=this.state.multi
onChange=this.handleChange('multi')
placeholder=this.props.reactSelectName
isMulti
/>
</div>
);




By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.