MENU


props.children, defaultProps, displayName

So far we have used 'render()', 'this.props', and 'key' in our component definition. There exist other special React component members.

'props.children' can be used to retrieve the children of the component.
RESETRUNFULL
<!DOCTYPE html><html><head></head>
  <body><script src="https://unpkg.com/react@17/umd/react.development.js"
            crossorigin></script><script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
             crossorigin></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
        function Sidebar(props) {
            return (<nav className="sidebar">{props.children}
                       </nav>);
        }
        const sb = <Sidebar>
                            <a href="#">Home</a><br/>
                            <a href="#">Posts</a><br/>
                            <a href="#">Contact</a><br/>
                        </Sidebar>
    ReactDOM.render(sb, document.querySelector('div'));
    </script>
    <div></div>
  </body></html>
'defaultProps' can be defined as a property on the component class itself, to set the default props for the class.
RESETRUNFULL
<!DOCTYPE html><html><head></head><body><script src="https://unpkg.com/react@17/umd/react.development.js"
            crossorigin></script><script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
             crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
         function Welcome(props) {
             return <h1>Hello, {props.name}.</h1>;
         }
        Welcome.defaultProps = {name : 'Ali'};
        ReactDOM.render(<Welcome/>, document.querySelector('div'));
    </script>
    <div></div></body></html>
Likewise, 'displayName' can be defined for debugging messages. Usually, you don't need to set it explicitly because it's inferred from the name of the function or class that defines the component. You might want to set it explicitly if you want to display a different name for debugging purposes or when you create a higher-order component.
RESETRUNFULL
<!DOCTYPE html><html><head></head>
  <body><script src="https://unpkg.com/react@17/umd/react.development.js"
              crossorigin></script><script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
             crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
        function Hi(props) {
            throw 'err';
            return (<h1>Hi</h1>);
        }
        Hi.displayName = 'Renamed';
        ReactDOM.render(<Hi/>, document.querySelector('div'));
    </script>
    <div></div>
  </body></html>