Our app is not yet a BMI calculator, because it only has two sliders, but doesn't show the calculated BMI number. In this lesson we will learn how to export any stream from a child component and use it in the parent component, in order to display the BMI calculation on the DOM.
If you didn't notice, our app is not yet a BMI calculator because it only has two sliders. It doesn't yet show the calculated BMI number. Let's build that next.
First of all, we will need a BMI stream, and let's assume that exists. Then we can combine [inaudible 3:30] together with weight retrieveStream and height retrieveStream. This function now takes three parameters. Then we can build the whole markup here for our calculator app, including a header saying BMI is now this value.
That's possible. How do we build BMI stream? From previous lessons we saw that we can make it as an absorbable of combined latest of the weight value stream and the height value stream and then giving also a function that takes those two values and calculates the BMI value as a number.
This stream will emit numbers and it will be combined in here to create a markup, but we don't have weight value stream and height value stream. Where will we get these from?
Well, we do have a weight slider and a height slider, and these come from the labeled slider component. If you look at the labeled slider component, it doesn't export anything else than just the DOM write effect, which is this virtual DOM tree stream. It wouldn't be neat to extract the value from a string in a label in the virtual DOM element. That doesn't sound proper.
We can get the value stream out of the state object stream, because the state object stream has the labels and it has the value. Let's use that. We can simply export here as another sync a value stream for the value number and we can just get that from the state object by mapping each state object to state.value.
Now that we are exporting this, we can use it here in the main. We can say weight value stream is the weight syncs.value. Height value stream is height syncs.value.
There we go. We see BMI is undefined because here in this calculation we're not returning the actual number. Let's do that.
OK, now we're calculating the number and everything works as it should. The conclusion is, we can use the returned object of syncs to pass values from the child component to the parent component, which is in this case the main. Syncs can mean write effects, such as the DOM write effect, but they might also mean simply messages that are being passed up.
In the case of the weight-labeled slider its parent is the main, and the main uses there the value stream. Then the DOM write effect of these sliders is being combined into a common DOM write effect. This is how you get component hierarchy in Cycle.js.