react return jsx from function

Question

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>
    )
}

Answer 1

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>
        )
    }

Answer 2

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>
  );
};