Правильная сортировка массива компонент в React

Question

Новичок, делаю свой первый проект на React. У меня есть локальный JSON.

export   const mockdata = 
  [
  {id:0,
    name:'Перчатки боксерские Adidas',
   price: '140 BYN',
   newPrice:'100 BYN',
   urli: "https://ic4-a.wowma.net/mis/gr/115/imgu-a.wowma.net/exud/cb/6/41395334/0/mb/294131920_1.jpg"},
  {id:1,
    name:'Перчатки боксерские Twins Professional',
   price:'290 BYN',
   newPrice: '230 BYN',
    urli: 'http://ironargument.ru/published/publicdata/IRONARGUMENT/attachments/SC/cache_images/w358:h358:m3:%D0%9F%D0%B5%D1%80%D1%87%D0%B0%D1%82%D0%BA%D0%B8%20%D0%B1%D0%BE%D0%BA%D1%81%D0%B5%D1%80%D1%81%D0%BA%D0%B8%D0%B5%20%D1%81%D0%BE%D1%80%D0%B5%D0%B2%D0%BD%D0%BE%D0%B2%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5%20BGVL%20-%202%20%D0%BA%D1%80%D0%B0%D1%81%D0%BD%D1%8B%D0%B5%20%28%D0%BB%D0%B8%D0%BF%D1%83%D1%87%D0%BA%D0%B0%29_Twins_ironargument.png'},
    {id:2,
      name: 'Перчатки боксерские Ataka', 
  price: '195 BYN',
  newPrice: '150 BYN',
urli: 'https://old.sporttovary59.ru/thumbnail/perchatki-bokserskie-ataka-carbon-bgs-038_2.jpg'},
{id:3,
name:'Защита голени Muay-Thai',
price:'195 BYN',
newPrice:'150 BYN',
urli:'https://musculshop.ru/upload/resize_cache/iblock/093/300_300_1/09361eb5ffdd48163f6f430e583d2c4c.jpg'}
  ]

Есть компонента которая принимает данные:

const Item = (props ) => {




return (
    <div className='flexbox-container-item'>
 <div>
       <div className='product-item'>
  <img src={props.urli} alt="перчи"/>
  <div className='list-products'>
    <h4>{props.name}</h4>
    <span className="price">{props.price}</span>
    <h4 className="real-price">{props.newPrice}</h4>
    <h5></h5>
    
    <button type="button" className='button'  >В корзину</button>
    
  </div>
  
</div>
</div>
</div>



 
)

} export default Item

И есть компонента которая собирает компоненты в массив для дальнейшего рендеринга:

const Feed = (props) => {
 
    
  const data =  props.items.map((item) => <Item   name={item.name} price ={item.price} newPrice={item.newPrice} urli ={item.urli} /> )
  
return (
  <div >
  {data}
 
 </div>
)
  }
  export default Feed

Задача при навигации(react router) отображать нужную мне компоненту а не весь массив из json. Буду признателен за помощь, т.к. у меня пока ступор.

Answer 1

если я правильно понял задачу, то вместо map'a надо использовать find, прокидывать id в компонент и по нему искать в массиве нужный элемент:

const render = () => {
 const item = props.items.find((item) => item.id === props.id );

 return <Item name={item.name} price ={item.price} newPrice={item.newPrice} urli ={item.urli} />
}

return (
  <div >
  {render()}
 </div>
)

БЛОГ НА HUSL

Правильная сортировка массива компонент в React

Ответы (1 шт):