Как мне при клике поставить продукт на первое место в списке в react

Question

У меня есть ассоциативный массив который я перебираю и вывожу данные. Как мне сделать чтобы при клике на продукт он становился первым в списке

Компонент с массивом

class ProductList extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            productList:[
                {
                    name: "test",
                    description: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam non incidunt unde et deserunt cum dolorem neque excepturi quae voluptate quas, pariatur omnis ex nesciunt voluptatibus corrupti saepe ducimus repudiandae?",
                    price: 100,
                    id: 1
                },
                {
                    name: "test",
                    description: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam non incidunt unde et deserunt cum dolorem neque excepturi quae voluptate quas, pariatur omnis ex nesciunt voluptatibus corrupti saepe ducimus repudiandae?",
                    price: 100,
                    id: 2
                },
                {
                    name: "test",
                    description: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam non incidunt unde et deserunt cum dolorem neque excepturi quae voluptate quas, pariatur omnis ex nesciunt voluptatibus corrupti saepe ducimus repudiandae?",
                    price: 100,
                    id: 3
                }
            ]
        }
    }

    render() {
        return (
            <div className="">
                <ProductCard 
                    productList={this.state.productList}
                />
            </div>
        );
    }
}

Спасибо большое

Answer 1

Это не сложное задание и если вам трудно справляться с такой задачей лучше учить с начало сам язык JavaScript а потом переходить к разным библиотекам типо Реакта.

Решение не очень то идеальное как по мне.

Отправляю кликнутый объект к родителю и там условно проверяю если id этого объекта совпадает с id элементов моего стейта то добавляю этот кликнутый объект в нулевой индекс массива.И потом удаляю дубликаты с массива.

import React from "react";
import ProductCard from "./ProductCard";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      productList: [
        {
          name: "Lamborghini",
          description:
            "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam non incidunt unde et deserunt cum dolorem neque excepturi quae voluptate quas, pariatur omnis ex nesciunt voluptatibus corrupti saepe ducimus repudiandae?",
          price: 100,
          id: 1
        },
        {
          name: "Koenigsegg",
          description:
            "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam non incidunt unde et deserunt cum dolorem neque excepturi quae voluptate quas, pariatur omnis ex nesciunt voluptatibus corrupti saepe ducimus repudiandae?",
          price: 100,
          id: 2
        },
        {
          name: "Mclaren",
          description:
            "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam non incidunt unde et deserunt cum dolorem neque excepturi quae voluptate quas, pariatur omnis ex nesciunt voluptatibus corrupti saepe ducimus repudiandae?",
          price: 100,
          id: 3
        }
      ]
    };
  }

  clickHandler = carId => {
    let updatedState = [...this.state.productList];
    updatedState.forEach(el =>
      el.id === carId.id ? (updatedState = [el, ...updatedState]) : el
    );
    this.setState({ productList: [...new Set(updatedState)] });
  };

  render() {
    return (
      <div className="">
        <ProductCard
          productList={this.state.productList}
          clickHandler={this.clickHandler}
        />
      </div>
    );
  }
}

Компонент ProductCard

export default ({ productList, clickHandler }) => {
  return productList.map(el => (
    <div onClick={() => clickHandler(el)} key={el.id}>
      {el.name}
    </div>
  ));
};

Ссылка на Codesandbox

БЛОГ НА HUSL

Как мне при клике поставить продукт на первое место в списке в react

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