This is an ongoing series on React, check out the first part here:
So let’s get started where we left off, in this case we want to validate an input form before submitting the information upstate, a combination of state,form elements & bootstrap UI display takes care of the interaction, so in the end the component is fairly independent.
Before going any further, we need to take a look at a components lifecycle, there are more stages in a component’s life, but these few I think are enough to get the concept across ( open your console for this one) :
Another common thing you might find yourself doing is Iterating and rendering the contents of an array, here’s a simple one.
Now that we know how to iterate over an array, let’s talk about data flow, specifically from child to parent, while a parent communicates through props to it’s children, a child can communicate through a function passed as a prop as well:
But what if you want to create components on the fly, here’s a simple way of creating components in a for loop that incorporates the previous data flow pattern.
Another thing you might want to change on the fly is css styles, in this case with a custom component method.
This one took me a little longer to figure out, but basically you can incorporate Css transitions into your components life cycle, check it.
Getting close to a good basic understanding of React, here is the all too popular Ajax call which happens inside a component, which in turn could call other components to display and format it.
I wanted to revisit the data flow example,now with communications from a child to a parent and child to a parent’s parent, also using bind as an alternative way of passing a function as a prop.