destructuring practice - nested object item name
Wed Jun 21 2023 12:54:01 GMT+0000 (Coordinated Universal Time)
Saved by
@sarfraz_sheth
#react.js
const cars = [
{
model: "Honda Civic",
coloursByPopularity: ["black", "silver"],
speedStats: {
topSpeed: 140,
zeroToSixty: 8.5
}
},
{
model: "Tesla Model 3",
coloursByPopularity: ["red", "white"],
speedStats: {
topSpeed: 150,
zeroToSixty: 3.2
}
}
];
export default cars;
------- App Page --------------
import React from "react";
import ReactDOM from "react-dom";
import cars from "./practice";
const [honda, tesla] = cars;
const {speedStats: { topSpeed: hondaTopSpeed }} = honda;
const {speedStats: { topSpeed: teslaTopSpeed }} = tesla;
const {coloursByPopularity: [hondaTopColour]} = honda; // access to item object and set variable name to the item of the nested object.
const {coloursByPopularity: [teslaTopColour]} = tesla;
ReactDOM.render(
<table>
<tr>
<th>Brand</th>
<th>Top Speed</th>
<th>Top Colour</th>
</tr>
<tr>
<td>{tesla.model}</td>
<td>{teslaTopSpeed}</td>
<td>{teslaTopColour}</td>
</tr>
<tr>
<td>{honda.model}</td>
<td>{hondaTopSpeed}</td>
<td>{hondaTopColour}</td>
</tr>
</table>,
document.getElementById("root")
);
content_copyCOPY
Comments