javascript - How to render children in react component without passing it?

Question

I have component:

const PapeConainer = ({children}) => {
  return (
    <div //some classes and other stuff>
     {children}
    </div>
  );
}

But on merge request got a comment that i don't need to pass children, because function already has it. So, my questing is it possible to render children without passing it. I`m not found any information on this.

like:

const PapeConainer = () => {
  return (
    <div //some classes and other stuff>
     {magic.children}
    </div>
  );
}

Answer 1

Actually you can't do that, you have to get the children object from props, just as you said:

const PapeContainer = ({children}) => {
  return (
    <div //some classes and other stuff>
     {children}
    </div>
  );
}

I think that what that comment wanted to say is that you don't have to pass children as a specific prop named "children" in your parent component, like this:

<PapeContainer //some classes and other stuff
   children={someChildren}
/>

That would not make sense because "children" is a special property of React which contains any child elements defined within the component. So instead of passing the prop explicitly you put the children content inside the parent tag, like this:

<PapeContainer //some classes and other stuff>
   {someChildren}
/>