Challenge 9: Shared Object

[00:00:00]
>> Evan: The next exercise, what we're gonna try to do is the template is almost the same, except that these components do not take props anymore. But we need to maintain the same behavior from our previous exercise. When you click the button, and it caused the increment method of the root component, and all these child components should update together.

[00:00:26]
So we need to find a way to make first make all of these child components share the same piece of state. Second, our root component should be able to update that piece of state. And how can we do that? So the hint is that we can use a shared object to serve us as our common piece of state.

[00:00:54]
>> Evan: And many of you probably have run into this warning before, like, if you write a component like this, what warning would you get? Anyone?
>> Evan: Yeah, data must be a function, right? So most of you have probably run into that before. The reason that data must be a function is because most of the time we want each component instance to have its own separate unique piece of data, instead of all of these components sharing the same piece of data.

[00:01:29]
But in this particular case, what we want to achieve is to make all of them share the same piece of data. So how can we achieve that? So let's try to do that.