Why pass functions as children in React component? - reactjs

Question

I'm new to React, still struggling in understanding the design of React component.
I saw some code as below:
export const ProModeContext = React.createContext();
export class XXX extends Component {
...
render() {
return <ProModeContext.Consumer>
{ contextData => {xxx }
</ProModeContext.Consumer>
}
}
and the pattern is
<Abc>
{
param => {xxx} // let's say this anonymous arrow function is called f1
}
</Abc>
so my questions are:
Q1- is f1 a child of Abc component, therefore it can be accessed as this.props.children inside the component?
Q2-if f1 is a child of Abc component, how f1 get called inside the Abc component?
export class Abcextends Component {
...
this.props.children??? //how to invoke `f1` internally?
}
since children props is not an array, we can't invoke f1 as this.props.children[0]()

Answer 1

Conceptually any valid JSX is a valid JavaScript function.
JavaScript functions accept JavaScript expressions or functions as arguments, which is roughly what's happening when you do
<h1>{ person.firstName }</h1>
Here you create a function h1, that accepts the argument person.firstName, again, roughly.
As to the question why it's not all props, if everything was props then it's be something akin to using callbacks.
By utilizing the parent-children pattern we can have a more declarative UI.
Now, why would we want to do this? There are a plethora of reasons but one good reason is that in some cases it's more concise where you don't want to declare a variable for a list of JSX items.
You asked the question about this pattern below:
<Abc propName={param => xxx}>
This pattern is called a render prop - and it's great to use when you want to separate logic and rendering.
The declarative pattern and the render prop pattern serves different use cases and should be applied when necessary to the problem at hand and neither is a one size fits all solution.
Edit:
Your first example looks like this compiled from JSX to JavaScript
React.createElement(
ABC, null, counts.map(count => React.createElement("p", null, count))
)
and the API for createElement looks like this:
React.createElement(
type,
[props],
[...children]
)

Answer 2

If I am not misinterpreting your question, you are asking about the render prop pattern.
So render props are basically used when you want some render decisions in the child to be taken by the parent. Eg:
<DataProvider render={data => (
<h1>Hello {data.target}</h1>
)} id={someId}/>
Here assume DataProvider is a component which just fetches data from some API based on id. Now what to render after fetch is decided by the render props. So the implementation for DataProvider would just be:
Call API for someId.
Call render prop function with the fetched data.
One usecase of this pattern is separation of concern. DataProvider is just concerned with fetching data. The parent is just concerned about rendering it. There are other use cases as well described in the official docs linked above.
Passing as children :
function Parent() {
return (
<Child>
<div>Some child content</div>
</Child>
);
}
function Child({ children }) {
return <div>{children}</div>;
}
Passing with render prop:
function Parent() {
return <Child render={(text) => <div>Some child {text}</div>} />;
}
function ChildWithRenderProp({ render }) {
return <div>{render('content')}</div>;
}