React zamień element w tablicy

Question

Próbuję zastąpić jeden element w mojej tablicy innym elementem, mam symbol zastępczy z pozycją numeru, a kiedy klikam na dodaj pierwszy element powinien przejść na 1. pozycję, 2. pozycja na 2. pozycję i tak dalej.

W tej chwili doda element na wszystkich pozycjach po kliknięciu, co nie jest zachowanie, które chciałbym.

Po usunięciu symbolu zastępczego dla pozycji numeru mogę je ustawić w odpowiedniej pozycji, ale nie mogę go uruchomić z elementem zastępczym.

Jak uzyskać pozycję produktu po kliknięciu w miejsce pozycji numeru w tablicy?

https://codesandbox.io/s/6z48qx8vmz

Hello.js

import React from 'react'; 
import update from 'immutability-helper' 
import styled from 'styled-components' 
import Product from './Product' 

const NumberWrap = styled.div` 
    display: flex; 
    flex-wrap:wrap 
    border: 1px solid #ccc; 
    flex-direction: row; 
` 

const Numbers = styled.div` 
    display:flex; 
    background: #fafafa; 
    color: #808080; 
    font-size: 32px; 
    flex: 0 0 20%; 
    min-height: 200px; 
    justify-content: center; 
    align-items:center; 
    border-right: 1px solid #ccc; 
` 

const CardWrap = styled.div` 
    display:flex; 
    flex-wrap: wrap; 
    flex-direction: row; 
    margin-top: 20px; 
` 

export default class Hello extends React.Component { 
    constructor() { 
    super() 
    this.state = { 
     placeholder: [1,2,3,4,5], 
     data: [ 
     { id: 1, header: 'Item 1'}, 
     { id: 2, header: 'Item 2'}, 
     { id: 3, header: 'Item 3'}, 
     { id: 4, header: 'Item 4'} 
     ], 
     addedItems: [], 
    } 
    this.handleAdd.bind(this) 
    this.handleRemove.bind(this) 
    } 

    handleAdd(id) { 
    this.setState({ 
     addedItems: update(this.state.addedItems, { 
     $push: [ 
      id, 
     ], 
     }) 
    }) 
    } 

    handleRemove(index) { 
    this.setState({ 
     addedItems: update(this.state.addedItems, { 
     $splice: [ 
      [index, 1] 
     ], 
     }) 
    }) 
    } 

    render() { 
    return(
     <div> 
     <NumberWrap> 
      { 
      this.state.placeholder.map(item => 
      <Numbers>{item} 
      { 
       this.state.data.filter(item => 
       this.state.addedItems.indexOf(item.id) !== -1).slice(0, 5).map(item => 
       <Product {...item} remove={this.handleRemove} /> 
      ) 
      } 
      </Numbers> 
     )} 
     </NumberWrap> 


     <CardWrap> 
     { 
      this.state.data.map(item => 
      <Product {...item} add={()=>this.handleAdd(item.id)} /> 
     )} 
     </CardWrap> 
     </div> 
    ) 
    } 
} 

Product.js

import React from "react"; 
import styled from "styled-components"; 

const Card = styled.div` 
    flex: 0 0 20%; 
    border: 1px solid #ccc; 
`; 

const Header = styled.div` 
    padding: 20px; 
`; 

const AddBtn = styled.button` 
    width:100%; 
    height: 45px; 
`; 

const Product = props => { 
    const { add, id, header, remove } = props; 
    return (
    <Card> 
     <Header key={id}> 
     {header} 
     </Header> 
     <AddBtn onClick={add}>Add</AddBtn> 
     <AddBtn onClick={remove}>Remove</AddBtn> 
    </Card> 
); 
}; 

export default Product; 

Answer 1

miałem trochę trudności ze zrozumieniem pytanie, ale jest to co chcesz https://codesandbox.io/s/vj7vxw198y? Nadal wymagałoby to trochę pracy, aby pozwolić na wielokrotne dodawanie tego samego przedmiotu, jeśli tego chcesz.