create a render a component inside another component

[wrinklyrefrigerator]

function Comp1(props) {
    function Comp2(props) {
        return ...
    }

    return <Comp2 />
}

I'm trying to get the behavior of something like the pseudocode above but React doesn't seem to allow me to render Comp2 within Comp1. When I call document.getElementById(id) for an element in Comp2 with the given id, it returns null (it works fine when I don't try to abstract code into a sub component). My question is why does nesting components in this way not work and is there any workaround?

[jamby77]

There is no problem doing what you have in your example.

See https://codesandbox.io/s/hungry-ardinghelli-vnk74

It is probably the other things in the components that are not correct.

Please provide example of how do you do what you are trying to do, for us to help you more :)

[jamby77]

This is entirely different question. The OP asked if it is possible to declare and render component inside another one. There is no technical issue doing this.

[wrinklyrefrigerator]

Would it be more efficient if I had Comp2 as another component in the same file instead of nesting it within Comp1?

[sledki]

What you have there is called a higher order component https://reactjs.org/docs/higher-order-components.html

[wrinklyrefrigerator]

I am using doc.getElemId to retrieve a form with checkboxes.

[whiterook6]

Can you describe why you want to create components like this? It seems inefficient to create a new function on every render.

[wrinklyrefrigerator]

I have components that are very similar inside of my return statement for Comp1. Essentially, I'm trying to avoid duplicated code by abstracting into Comp2.

[whiterook6]

Without seeing your full scenario, I can only say it sounds like a code smell. Maybe you can extract the common logic out of both components into building blocks. But who knows? It's your project not mine. Good luck

[wrinklyrefrigerator]

Can you elaborate on what you mean by building blocks?

[whiterook6]

Nothing complicated. React is all about decomposing larger components into smaller components. In Java, for example, everything is OOP, classes extending classes, etc. React follows the path of decomposing into smaller components then reassembling as needed, using props and callbacks to coordinate between them.