@composi/core:
Props
Passing Props Down
When working with components, props are the way by which you pass data to a component. The data can be anything--a string, a number, a boolean, an array, an object, a function, and even another component. And of course you can pass the props of a parent down to its children.
Let's start with a simple example:
See the Pen @composi/core - Props-1 by Robert Biggs (@rbiggs) on CodePen.
Adding More Props
You can add as many props as you need to.
See the Pen @composi/core - Props-2 by Robert Biggs (@rbiggs) on CodePen.
Above we are passing more values to our component through props, but it's a bit fussy accessing them from the props parameter. We can use destructuring to simply accessing the props.
Destructuring the Arguments
Here we destructure the argument that our tag receives. Basically, we are breaking the props argument down into its constituent parts as an object literal.
See the Pen @composi/core - Props-3 by Robert Biggs (@rbiggs) on CodePen.
Destructuring Prop Assignment
Instead of passing in individual props, we'll use destructuring to pass them all in as an object literal. We do that by creating an object literal of the values we want to use. Then we pass that to our component using curly braces and the spread operator.
See the Pen @composi/core - Props-4 by Robert Biggs (@rbiggs) on CodePen.
Destruction the assignment of props results in cleaner and easier to read code. props make components dynamic and imbue them with super powers.
Array as Prop for Lists
As we mentioned at the start, you can pass any possible value as a prop. Next we're going to show how to pass an array of objects so we can render a list. To make this more useful, we'll make sure our items have unique keys/ids. We'll use these to key the individual list items. For a static list this is unnecessary. But if you wanted to enable the user to delete or otherwise change the order of the list items, keys will enable Composi to understand how to update the DOM in the most efficient manner.
When dealing with an array of data as a prop, we need to drop out of JSX and down to pure JavaScript. You can do that inside the JSX by using curly braces.
Using Keys for List
Notice how we access the property data. Since this is an array, we use map to loop over each item in the array an return a list item. The list item has a property key={item.key}. This doesn't actually get rendered to the DOM. Instead Composi preserves this value in the virtual node that it creates for the list. If Composi needs to re-render the list because the order of the list items changed, it will use the key values on the virtual list items to understand best how to reuse the DOM nodes to update the list. Because where passing an array as a prop, we had to change the destructuring to handle an array using the format {...{data}}.
See the Pen @composi/core - Keys by Robert Biggs (@rbiggs) on CodePen.
Passing Props to Children
One of the great things about JSX and props is that fact that you can pass them down from parent to child. Unlike frameworks based on the concept of two-way data binding. JSX embraces the practice of one-way data flow. With two-data binding it is very hard to determine in which direction a problem is ocurring. With one-way data flow, this is a lot easier.
In the following example we pass the data for the list items to a child component, which handles looping over the data and creating the list items.
See the Pen @composi/core - Passing Props to Children by Robert Biggs (@rbiggs) on CodePen.
Advanced Composition
In this example we are doing advanced composition, using destructuring and passing props and children down to child components to affect how the complete component renders. Open the exemple in Codepen and you can change the border color by changing the color value on the FancyBorder tag. It is currently set to "maroon", but you can change it to either "red" or "blue".
See the Pen @composi/core - Passing Children to Component-2 by Robert Biggs (@rbiggs) on CodePen.