// Stateless functional component CurrentDate
// When dealing with stateless functional components, you basically consider props as an argument to a function which returns JSX
// You can access the value of the argument in the function body. With class components, you will see this is a little different
const CurrentDate = (props) => {
    return (
        <div>
            { /* access the date property from Calendar */ }
            <p>The current date is: {props.date}</p>
        </div>
    );
};

// ES6 class component Calendar
class Calendar extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>
                <h3>What date is it?</h3>
                { /* pass in a property to the component CurrentDate with date assigned to the current date from JS's Date object */ }
                <CurrentDate date={Date()} />
            </div>
        );
    }
};

// render Calendar to the DOM and put it where id='challenge-node' in HTML
ReactDOM.render(
    <Calendar />,
    document.getElementById('challenge-node');
);