Desde el componente FilterBydescription de la función Render, trato de devolver el elemento jsx. Pero en lugar de jsx en UseAdvertisementsFilters, obtengo undefined. Lo más probable es que se pierda el contexto, pero no entiendo por qué. Ayuda a devolver el jsx de la función.
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> ) }puedes probar este codigo
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> ) }Su problema aquí es que está intentando acceder a una función desde la función FilterBydescription . Tal como lo tiene ahora, FilterBydescription no es un componente de React. Es una función que devuelve un método Render que genera un componente React. Entonces, cuando intente acceder a la propiedad Render desde FilterBydescription , obtendrá undefined .
Lo que probablemente desee hacer es convertir FilterBydescription en un componente y representar ese componente en su componente UseAdvertisementsFilters .
Algo como esto:
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> ); };