Create component with dynamic style

1. Select Components panel -> "HelloWorldComponent".
2. Edit Editor panel -> Component markup field from <h1 id="header">{state.content}</h1> to <h1 className={state.status} id="header">{state.content}</h1>. This creates a new class attribute and fetches status value from the state.
3. Edit state in Editor panel -> Component state field from {"content":"Hello world"} to {"content":"Hello world", "status":"valid"}. This will create a new state property in the name of status.
4. Type .valid{border: 1px solid green;} in Editor panel -> Component css field.
5. Click Editor panel -> Save button.
6. Reload.
7. Click Components panel -> HelloWorldComponent. Notice preview has "Hello world" with green border. This means the class is getting applied successfully.
8. Select Settings panel -> h1-header check box. This will open up all existing events bound to h1-header element.
9. Edit Settings panel -> Events -> Existing -> onClick -> reducer from state.content = "Hi World" to state.content = "Hi World"; state.status = "invalid". What we are doing is, updating the state to contain a modified status value.
10. Click Settings panel -> Save button.
11. Edit Editor panel -> Component css field from .valid{border: 1px solid green;} to .valid{border: 1px solid green;} .invalid{border: 1px solid red;} . Now we have two classes created. The class names are fetched from the state of the component.
12. Click Editor panel -> Save button.
13. Reload.
14. Click Components panel -> HelloWorldComponent. Preview panel should show "Hello World".
15. Click Preview panel -> "Hello World". "Hello world" with green border should change to "Hi World" with red border. This is because, when "Hello World" is clicked, state gets modified values of content and status. Preview re-renders the component with the new state.

Next - Compose bigger components using smaller components