Convert to dynamic components

The main goal of REACT is to take data from the Model (using the MVC design philosophy) and display it on the screen. REACT handles this by using curly braces {} to mark variables (instead of static text). The first goal is to modify the list to show variables.

1. Open the main.js file, and add some test data to the top. Add the following JavaScript to the top of the file:

var testData =
{
	ProductID:0,
	ProductName: "Test Product 1",
	QuantityPerUnit: "100 units per box",
	UnitPrice: "49.75",
	Discontinued: false
};

Now, scroll down to the ListBox component. There are four data pieces we need to modify. Start by selecting the first <div className="col-sm-8 top"> section, and replace it with the following JavaScript:

The pre-compiler looks for items surrounded by curly brackets. Those items are treated as JavaScript variables, instead of static text.

<div className="col-sm-8 top">
    <h4>{testData.ProductName}</h4>
    <p> {testData.QuantityPerUnit}</p>
</div>

Next, select the next <div> tag, and replace it with the following JavaScript

<div className="col-sm-3 text-right top">
    <h4>
        {testData.UnitPrice}
        <small className="text-muted"> EUR</small>
    </h4>
    <p>{testData.Discontinued ? "Discontinued" : "Available"}</p>
</div>

Run your application. There will be three list boxes, and the data will now match the testData variable we added to our code.

Up to this point, our REACT components have used static data to display on the screen. In order to display dynamic data, the components must be modified to recognize local variables.

In REACT, data can be one of two different types.

• The properties values (or props) is data that is passed to the component as read-only. This is a one way transmission of data from the parent to the child, and there is no expectation that the data will change after it is rendered. This is useful when sending data to be rendered that will not be modified
• The state values (or state). State values are designed to be updated dynamically (hence the name “state”). These values can be changed by both the parent or child, and these values can change during runtime.

Our data will eventually come from a server, but the components that display the data will always have static copies of that data. In this case, our ListBox will use properties. Eventually, our ProductList component will use state data. That is coming up in a later tutorial.

Open the main.js file, and scroll down to the ProductList component. Select all three ListBox components inside the render method, and replace them with this JavaScript:

<ListBox row={testData} />

Scroll up to the ListBox component. Replace each instance of the word testData with the following text:

this.props.row

Now run the application. There will be only one row, and the row will still have the test data inside it.

To display multiple rows of data, the ProductList component will need to be modified to loop through data and use a ListBox for each row.

Start by replacing the testData with an array of test data. Select the testData variable, and replace it with the following JavaScript:

var testData = [
    {
      ProductID: 0,
    	ProductName: "Test Product 1",
    	QuantityPerUnit: "100 units per box",
    	UnitPrice: "49.75",
    	Discontinued: false
    },
    {
      ProductID: 1,
    	ProductName: "Test Product 2",
    	QuantityPerUnit: "20 cases per pallet",
    	UnitPrice: "168.77",
    	Discontinued: false
    },
    {
      ProductID: 2,
    	ProductName: "Test Product 3",
    	QuantityPerUnit: "20 per box, 20 boxes",
    	UnitPrice: "4953.75",
    	Discontinued: false
    },
    {
      ProductID: 3,
    	ProductName: "Test Product 4",
    	QuantityPerUnit: "65 individually wrapped",
    	UnitPrice: "112.50",
    	Discontinued: true
    }
];

In order to work through the array, we could use a for() loop. Instead, JavaScript has a more powerful method called map(), which can transform an entire array at one time.

Scroll down to the ProductList component. Select the entire return() function, and replace it with the following JavaScript:

render: function() {
	var productListBoxes = testData.map( function(row) {
		return(
			<ListBox row={row} key={row.ProductName} />		
		);
	})

	console.log(productListBoxes);

	return (
		<div className="list-group">
			{productListBoxes}
		</div>
	)
}

Run the application. Four rows of data will be displayed, each corresponding to a row in our testData variable.

JavaScript:

• Instead of a for() loop, this tutorial used the JavaScript array map() function

This tutorial has only modified the main.js file. Here is the final code for that file:

var testData = [
{
ProductID:0,
ProductName: "Test Product 1",
QuantityPerUnit: "100 units per box",
UnitPrice: "49.75",
Discontinued: false
},
{
ProductID:1,
ProductName: "Test Product 2",
QuantityPerUnit: "20 cases per pallet",
UnitPrice: "168.77",
Discontinued: false
},
{
ProductID:2,
ProductName: "Test Product 3",
QuantityPerUnit: "20 per box, 20 boxes",
UnitPrice: "4953.75",
Discontinued: false
},
{
ProductID:3,
ProductName: "Test Product 4",
QuantityPerUnit: "65 individually wrapped",
UnitPrice: "112.50",
Discontinued: true
}
];

var ListBox = React.createClass({
render: function() {
    return (
	<button type="button" className="list-group-item" id="product-list">
		<div className="row vertical-align">
			<div className="col-sm-8 top">
				<h4>{this.props.row.ProductName}</h4>
				<p> {this.props.row.QuantityPerUnit}</p>
			</div>
			<div className="col-sm-3 text-right top">
				<h4>
					{this.props.row.UnitPrice}
					<small className="text-muted"> EUR</small>
				</h4>
				<p>{this.props.row.Discontinued ? "Discontinued" : "Available"}</p>
			</div>
			<div className="col-sm-1 center">
				<span className="glyphicon glyphicon-chevron-right pull-right" aria-hidden="true"></span>
			</div>
		</div>
	</button>
);
}
});

var ProductList = React.createClass({
render: function() {
var productListBoxes = testData.map( function(row) {
	return(
		<ListBox row={row} key={row.ProductName} />		
	);
})

console.log(productListBoxes);

return (
	<div className="list-group">
		{productListBoxes}
	</div>
)
}
});

ReactDOM.render(
<ProductList />,
document.getElementById('product-list')
);