React Counter Application

Part 1

Create a Counter component with a state of:
state ={ id: 1, value: 0}
Render the state static value onto the counter

Part 2

Update Counter component to have 2 buttons that will increment and decrement the value
add an event handler in the counter component
increment the counter value in the state Concept:
How to create an event handler
How to attach it to the lowest level element (the button or checkbox or input)

Part 3

Change the style to show yellow if counter is zero and blue if counter is > zero
Concept: How to modify the class of an element depending on its value

Part 4

Create a Counters component
Import counter list from sampleData.js in Counters
Map through the list and create a list of Counter elements

Display a list of Counter all maintaing their individual state

Concept: How to render a list of components with map
Concept: passing the key attribute to uniquely identify each react element in a list

Part 6

Create a delete button in Counter
Create handler in the Counters and pass it to Counter
Pass the handler as a prop and attach it to the delete button Concept: Always define the handler in the component with the state you would like to modify Concept: How to pass a handler from parent to child Concept: How to pass a param to the handler so that it knows which counter to delete

Part 7

Show a message "No more counters" if all counters have been deleted
Concept: How to conditionally render a message using the && operator

Part 8

Add a reset button in Counters to reset all counters
create handler in the Counters component reset all to zero
remove state from child component and get all its values from props instead Concept: For a parent to control a child component the child should not have a local state

Part 9

Create a new component Total and add the total count to it
but it cannot access the state in the Counters as its a sibling
shift state and handlers Concept: For sibling components to share data, the state and handlers should in a common parent aka state hoisting