React replace item in array

Question

I am trying to replace a single item in my array with another item, I have a placeholder with a number position on it, and when I click on add the first item should go into the 1st position , 2nd item into the 2nd position and so on.

At the moment it will add the item in all positions when clicked on, which is not the behaviour I would like.

If I remove the number position placeholder I can get them to go into the array in the correct position but I'm unable to get it to work with the placeholder.

How can I get the product item when clicked on replace the number position in the array?

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

I had bit hard time understanding the question but is this what you want https://codesandbox.io/s/vj7vxw198y ? It still would need some work to allow adding same item multiple times if you want that.