From the FilterBydescription component of the Render function, I try to return the jsx element. But instead of the jsx in UseAdvertisementsFilters I get undefined. Most likely the context is lost, but I don't understand why. Help return the jsx from the function.
const FilterBydescription = () => {
const [findByDescription, bindFindByDescription, resetFindByDescription] = useInput('')
const Render = () => {
return <FilterInput bind={bindFindByDescription} placeholder={"Find by description"} />;
};
return { Render };
}
export function UseAdvertisementsFilters({isLoading}){
return(
<aside className="col-xl-3 filter_detail">
<Row className="filter_detail__wrapper">
<Col xs={12}>
<Row>
<Col className={"filter_detail__search"} xs={12}>
{/* Get undefined */}
{FilterBydescription.Render}
</Col>
</Row>
</Col>
</Row>
</aside>
)
}
you can try this code
const FilterBydescription = () => {
const [findByDescription, bindFindByDescription, resetFindByDescription] = useInput('')
return <FilterInput bind={bindFindByDescription} placeholder={"Find by description"} />;
}
export function UseAdvertisementsFilters({isLoading}){
return(
<aside className="col-xl-3 filter_detail">
<Row className="filter_detail__wrapper">
<Col xs={12}>
<Row>
<Col className={"filter_detail__search"} xs={12}>
{/* Get undefined */}
<FilterBydescription />
</Col>
</Row>
</Col>
</Row>
</aside>
)
}
Your issue here is that you're trying to access a function from the FilterBydescription function. As you have it right now, FilterBydescription isn't a React component. It's a function that returns a Render method which renders a React component. So, when trying to access the Render property from FilterBydescription, you'll get undefined.
What you likely want to do is make FilterBydescription a component and render that component in your UseAdvertisementsFilters component.
Something like this:
const FilterByDescription = () => {
const [
findByDescription,
bindFindByDescription,
resetFindByDescription,
] = useInput('');
return (
<FilterInput
bind={bindFindByDescription}
placeholder={'Find by description'}
/>
);
};
export function UseAdvertisementsFilters({ isLoading }) {
return (
<aside className="col-xl-3 filter_detail">
<Row className="filter_detail__wrapper">
<Col xs={12}>
<Row>
<Col className={'filter_detail__search'} xs={12}>
<FilterByDescription />
</Col>
</Row>
</Col>
</Row>
</aside>
);
};