Implementing nested functional components

All components return some sort of object at the end of the day. Being that we can use functions to return these objects, we can nest them together to make giant component trees. As we pass data from one component to the next, we need to make sure that we reference the props in the proper manner. This pattern is called Prop Drilling...

1. Create a html document with personData and a Parent component with props passed

<script type="text/babel">

    const Parent = props => {
        return (
            <h1>
                Parent: {props.personData.parentName}
            </h1>
        )
    };

    const App = () => {
        const personData = {
            parentName: 'Gordon',
            childName: 'Mark',
            grandChildName: 'Blake'
        };

        return (
            <div>
                <Parent personData={personData} />
            </div>
        );
    };

    ReactDom.render(<App />, document.getElementById('root'));

</script>

2. Create a Child component and pass it in to the Parent component

const Child = props => {
        return (
            <div>
                <h2>Child: {props.personData.childName}</h2>
            </div>
        )
    };

const Parent = props => {
    return (
        <div>
            <h1>Parent: {props.personData.parentName}</h1>
            <Child personData={props.personData} />
        </div>
    )
}

3. The cycle continues for the Grandhcild component

const GrandChild = props => <h3>Grandchild: {props.personData.childName}</h2>;

const Child = props => {
    return (
        <div>
            <h2>Child: {props.personData.childName}</h2>
            <Grandchild personData={props.personData} />
        </div>
    )
}

Challenge

Create an object that represents a generational tree of your family similar to the Simpsons Object found in our follow along example. Keep it simple. Build out a few nested components that demonstrate the ability to pass data and conditionally render components if certain props are available.