In the web application I am building, I often loop through arrays of objects that are returned from an application programming interface (API) and display the data on the front-end using React. The following is an example JSON response from the API:
[ { "id": 42, "addressee": { "id": 98, "firstName": "James", "lastName": "Deacon", "photoLink": "images/IMG_3598.JPG", "city": "Atlanta", "state": "GA", "country": "United States", "createdAt": "2019-12-23T00:33:11.000Z", }, }, { "id": 43, "addressee": { "id": 99, "firstName": "Billy", "lastName": "Gato", "photoLink": "/images/IMG_9923.JPG", "city": "Chattanooga", "state": "TN", "country": "United States", "createdAt": "2019-10-13T04:22:42.000Z", } } ] I use React to map the above data retrieved from the API and pass it to a Card component as props, as shown below.
return( <div className="list"> {list.map(element => ( <div className="card" key={element.id}> <Card addresseeId={element.addressee.id} firstName={element.addressee.firstName} lastName={element.addressee.lastName} photoLink={element.addressee.photoLink} city={element.addressee.city} stateCode={element.addressee.stateCode} createdAt={new Intl.DateTimeFormat("en-US", { year: "numeric", month: "long" }).format(new Date(element.addressee.createdAt))} /> </div> ))} </div> ) Repeatedly copy and pasting "element.addressee" got to be tiresome, so I started thinking about how to use ES6's destructuring to make things less repetitive. The first thing I tried was the traditional const { x, y } = element pattern, but ESLint complained about "const". So I did some searching, but did not find much about how to destructure the current element in Array.prototype.map() in JSX.
I almost gave up, but finally resorted to reading the documentation and stumbled on assignment without declaration, where a variable can be assigned its value separately from its declaration. With this syntax ({ x, y } = element) is valid, just like const { x, y } = element. In the case of Array.prototype.map(), array.map(({ x, y }) => { //callback function }); will destructure element and assign x and y. The below code snippet shows how I used this to refactor the card component and skip typing "element.addressee" several times.
return( <div className="list"> {matchesFilteredByStatus.map( ({ id, addressee: { id: addresseeId, firstName, lastName, photoLink, city, stateCode, createdAt}, }) => ( <div className="card" key={id}> <Card addresseeId={addresseeId} firstName={firstName} lastName={lastName.substring(0,1) + "."} photoLink={photoLink} city={city} stateCode={stateCode} createdAt={new Intl.DateTimeFormat("en-US", { year: "numeric", month: "long" }).format(new Date(createdAt))} /> </div> ))} </div> ) 
Top comments (1)
Great Article managed to explain something I had difficulty putting into words.