React beginner assignment

Sometimes I do computer science teaching and get stuck how to do it properly. I like to give a small theoretical sum of what a lesson is about but then immedately give an exercise where the candidate can try out the new concepts.
This time I was asked to give lessons on React and I thought the best way would be to give an assignment which will test whether the student understood the core concepts of it. So here is the assignment (and here is a solution: https://stackblitz.com/edit/react-assignment-nr-1-solution)
There is an App component which stands for the wrapper of the component and 4 other (child) components:

In summary:

• App component: in it's state it has an appState which is initially 1 but it can be increased with a button.
• CompOne component: waits for an appState prop, displays it, plus it has it's own state: compOneState which you could edit with a textinput (more info: https://facebook.github.io/react/docs/forms.html#controlled-components)
• CompTwo: almost the same as CompOne: awaits for appState prop, displays it, and it also has it's own state: compTwoState which is initialized by 1 and it could be increased with a button.
• CompFour: only props are required: appState, compOneState which it displays
• CompThree: almost the same as CompFour - only props: appState and compTwoState, displays is.

This is how it should look like approximately:

Pseudo code:

<App>

    <CompOne>

        <CompFour />

        <CompFour />
    </CompOne>
    <CompTwo>
        <CompThree />
        <CompFour />
    </CompTwo>

</App>

• App: red border
• CompOne: blue border
• CompTwo: green border
• CompThree: black border
• CompFour: grey border

 Have fun learning!