Dfyjkt

I'm making a table of products for a shop (the headers are: id, title, imagePath, newPrice, oldPrice) coming from a JSON file and got an ItemTable component created in my React app to iterate over the contents of it.

Here is the code

import React, Component from "react";

import "./ItemTable.css";

class ItemTable extends Component 
 render() 
 return (
 <table>
 <thead>
 <tr>
 <th>#</th>
 <th>Title</th>
 <th>Image</th>
 <th>
 Price &nbsp;
 <button onClick=() => this.props.priceSort("title")>
 Sort
 </button>
 </th>
 <th>Old price</th>
 </tr>
 </thead>
 <tbody>
 this.props.data.map(row => (
 <tr key=row.id>
 <td>row.id</td>
 <td>row.data.title</td>
 <td>
 <img src=row.data.base_url alt="" />
 </td>
 <td>row.data.price</td>
 <td>row.data.oldPrice</td>
 </tr>
 ))
 </tbody>
 </table>
 );
 


export default ItemTable;

...and here's my App component...

import React, Component from "react";
import ItemTable from "./components/ItemTable/ItemTable";

import shop from "./data/shop.json";

import "./App.css";

class App extends Component 
 state = 
 data: shop
 ;

 priceSort = key => 
 this.setState(
 data: shop.sort((a, b) => parseFloat(b[key]) - parseFloat(a[key]))
 );
 ;

 render() 
 return (
 <div className="page-container">
 <ItemTable data=this.state.data priceSort=this.priceSort />
 </div>
 );
 


export default App;

My priceSort() function dosn't work though because I can't figure out the way to pass a deeply nested JSON prop. Here's a part of my JSON for you to get the picture...

[
 
 "id": 2,
 "data": 
 "price": 990,
 "cross_category_id": "733",
 "id": "95361595",
 "available": "true",
 "base_url": "http://image01.bonprix.ru/assets/319x448/1530596198/18164321-KFBpLZ9R.jpg",
 "target_url": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/White_stiletto_high-heels.jpg/300px-White_stiletto_high-heels.jpg",
 "title": "High heeled shoes",
 "url": "http://ssl.hurra.com/TrackIt?tid=10087150C577PPC&url=[[http://www.bonprix.ru/produkty/pulover-s-vysokim-vorotnikom-chernyj-953615/?landmark=Entry&wkz=98&iwl=291&typ=POR&anbieter=Soloway&aktion=POR_VKB&version=SSP_NAME&promo=promo]]",
 "discount": 0,
 "categoryId": ["733"],
 "description_id": "default",
 "star": "4",
 "picture": [
 "sizetype": "st_w240_h310", "path": "st_w240_h310/2/335/95361595" ,
 "path": "st_w300_h500/2/335/95361595", "sizetype": "st_w300_h500" ,
 "sizetype": "st_w64_h90", "path": "st_w64_h90/2/335/95361595" 
 ],
 "oldPrice": 990
 ,
 "main": 1,
 "refs": 
 

The question is: how do i pass the price from my JSON file?

Because in your priceSort you're no getting any data to sort.
Try this:

priceSort = key => 
 this.setState(( data: shop ) => 
 const sortedData = shop.sort((a, b) =>
 parseFloat(b['data'][key]) - parseFloat(a['data'][key])
 );
 return data: sortedData 
 );
;