React - render props (functional component)

In this article, we would like to show you how to render functional props in React.

Below we create Container functional component which renders name and two children <div> elements passed as props.

Runnable example:

// ONLINE-RUNNER:browser;

// Note: Uncomment import lines while working React project.
// import React from 'react';
// import ReactDOM from 'react-dom';

const Container = (props) => {
    return (
        <div>
          <div>{props.name}</div>
          <div>{props.children}</div>
        </div>
    );
}

const App = () => {
    return (
        <Container name="Property name ...">
          <div>Children text ...</div>
          <div>Children text ...</div>
        </Container>
    );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );

See also

1. React - render props (class component)