I am trying to make my own debounce input element, where I could send whichever input component I need like textarea and input and make it debounce. I have made a debounceComponent that looks like this:
import { useState, useCallback } from "react";
import debounce from "lodash.debounce";
const useDebounce = (callback, delay) => {
const debouncedFn = useCallback(
debounce((...args) => callback(...args), delay),
[delay] // will recreate if delay changes
);
return debouncedFn;
};
function DebouncedInput(props) {
const [value, setValue] = useState(props.initialValue);
const debouncedSave = useDebounce(
(nextValue) => props.onChange(nextValue),
1000
);
const handleChange = (event) => {
const { value: nextValue } = event.target;
setValue(nextValue);
debouncedSave(nextValue);
};
return props.renderProps({ ...props, handleChange, value });
//return <textarea value={value} onChange={handleChange} rows={5} cols={50} />;
}
export default DebouncedInput;
And this is how I use it:
<DebouncedInput
initialValue={value}
onChange={handleChange}
rows={5}
cols={50}
renderProps={(props) => <TextArea {...props} />}
/>
But, if I use it like that I get an error:
Objects are not valid as a React child (found: object with keys {dispatchConfig, _targetInst, _dispatchListeners, _dispatchInstances, nativeEvent, type, target, currentTarget, eventPhase, bubbles, cancelable, timeStamp, defaultPrevented, isTrusted, isDefaultPrevented, isPropagationStopped}). If you meant to render a collection of children, use an array instead.
You can see the codesandbox for it here . What am I doing wrong here, how can I fix this?
In your DebouncedInput
component change the return statement.
from
return props.renderProps({ ...props, handleChange, value });
to
return props.renderProps({ ...props, onChange: handleChange, value });
import { useState, useCallback } from "react";
import debounce from "lodash.debounce";
const useDebounce = (callback, delay) => {
const debouncedFn = useCallback(
debounce((...args) => callback(...args), delay),
[delay] // will recreate if delay changes
);
return debouncedFn;
};
function DebouncedInput(props) {
const [value, setValue] = useState(props.initialValue);
const debouncedSave = useDebounce(
(nextValue) => props.onChange(nextValue),
1000
);
const handleChange = (event) => {
const { value: nextValue } = event.target;
setValue(nextValue);
debouncedSave(nextValue);
};
return props.renderProps({ ...props, onChange: handleChange, value });
}
export default DebouncedInput;
Also, instead of spreading all the props to the component, pass only the props that are relevant to the input element. So, in this case when calling props.renderProps({ ...props, onChange: handleChange, value })
all the props that's being received by DebouncedInput
component are directly passed to the input
or TextArea
component which means renderProps
is also being passed. But in general input
or TextArea
might not have initialValue
, renderProps
as props, that will throw a warning.
There are different ways of in order not to get such warnings, below is one of the way
DebouncedInput
and the props of input component as rest
parameterfunction DebouncedInput({initialValue, renderProps, onChange, ...rest}) {
const [value, setValue] = useState(initialValue);
const debouncedSave = useDebounce(
(nextValue) => onChange(nextValue),
1000
);
const handleChange = (event) => {
const { value: nextValue } = event.target;
setValue(nextValue);
debouncedSave(nextValue);
};
return renderProps({ ...rest, onChange: handleChange, value });
}
inputProps
and passing the same through renderProps
.<DebouncedInput
initialValue={value}
onChange={handleChange}
renderProps={(props) => <TextArea {...props} />}
inputProps={{rows:5, cols:50}}
/>
function DebouncedInput(props) {
const [value, setValue] = useState(props.initialValue);
const debouncedSave = useDebounce(
(nextValue) => props.onChange(nextValue),
1000
);
const handleChange = (event) => {
const { value: nextValue } = event.target;
setValue(nextValue);
debouncedSave(nextValue);
};
return props.renderProps({ ...props.inputProps, onChange: handleChange, value });
}
props
and the component
also from the same place, you can do it in a simple way like below <DebouncedInput
initialValue={value}
onChange={handleChange}
renderProps={(props) => <TextArea {...props} rows={5} cols={50}/>}
/>
function DebouncedInput(props) {
const [value, setValue] = useState(props.initialValue);
const debouncedSave = useDebounce(
(nextValue) => props.onChange(nextValue),
1000
);
const handleChange = (event) => {
const { value: nextValue } = event.target;
setValue(nextValue);
debouncedSave(nextValue);
};
return props.renderProps({ onChange: handleChange, value });
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.