What is the correct way to use this.props.children?

Question

React

It is necessary that when switching to

<Route path="/user/:username/settings" component={UserProfileContainer.Settings} />

This.props.children changed

import UserProfileContainer from './containers/UserProfile';

My index

<Route path="/user/:username" component={UserProfileContainer} />

UserProfileContainer

return (
      <UserProfileDetail
        name={name}
      />
    );

UserProfileDetail

<main className="content">
  <div className="title">
     <h1>{name}</h1>
    <div>1 ссылка</div>
     <div>2 ссылка</div>
     <div>3 ссылка</div>
  </div>
  <div className="content">
     <h1>{this.props.children}</h1>
  </div>
</main>

Answer 1

What is the correct way to use this.props.children?

import React from 'react';
import ReactDOM from 'react-dom';

const SomeComponent = ({ name }) => (
  <span>{name}</span>
);

const SomeContainer = ({ children }) => (
  <div>{children}</div>
);

const Example = () => (
  <SomeContainer>
    <SomeComponent name="John" />
  </SomeContainer>
);

ReactDOM.render(
  <Example />,
  document.getElementById('root');
);

Result:

<div id="root">
  <div>
    <span>John</span>
  </div>
</div>