React: Use this.props.children or pass components as named props

Question

I'm in a situation where I am building a component that needs to render some child components. More specifically, I have a Map component and on it I wish to display a Legend component.

const Map = props => (
  <div id="map">
    { this.props.children }
  </div> 
);

// Usage:
const MapWithLegend = () => (
  <div id="map-view">
    <Map><Legend /></Map>
  </div> 
);

// Usage:
const MapWithoutLegend = () => (
  <div id="map-view">
    <Map />
  </div> 
);

However, this could also be expressed with named props:

const Map = ({ legend } => (
  <div id="map">{ legend }</div> 
);

// Usage:
const MapWithLegend = () => (
  <div id="map-view">
    <Map legend={Legend} />
  </div> 
);

// Usage:
const MapWithoutLegend = () => (
  <div id="map-view">
    <Map />
  </div> 
);

I'm not sure which way is the best in terms of scaling and reusability. Ultimately, we will have more than just legends to put over the map, for example: scales, zoom/navigation controls, etc...

Does it make sense to use React.Children for this or should I use named props?

My intuition is that using this.props.children frees the Map from caring about whether or not it needs to render a legend, or any other child controls, but it also creates a backdoor into the Map component, ie: passing arbitrary components as children of the Map component.

Is that a concern? Is it common to inspect this.props.children in the parent component before rendering them? If so, how?

Also, what about styling? With named props, I can position/style the "children" since they are named and I know what they are. With React.Children, it's an array of components that would need to be inspected so they can be positioned, in which case what do I gain from using this.props.children?

I've seen third party components using both paradigms, but I'm curious what are the scenarios in which one chooses one over the other.

Answer 1

I would recommend using children for this:

1. The JSX syntax easily shows you what your component does, just by looking at the render function. If you pass legend as an prop, you have no idea what <Map/> will do with that.
2. It enables you to pass props to the children from the container which renders the Map and its children. Which again makes it more obvious what is happening with <Legend/>

Inspecting the children sounds like you will implement a big switch-case statement to handle all edge cases. Using children won't produce any edge cases.