title: React replace item in array
body: <p>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.</p>
  
  <p>At the moment it will add the item in all positions when clicked on, which is not the behaviour I would like.</p>
  
  <p>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. </p>
  
  <p>How can I get the product item when clicked on replace the number position in the array?</p>
  
  <p><a href="https://codesandbox.io/s/6z48qx8vmz" rel="noreferrer">https://codesandbox.io/s/6z48qx8vmz</a></p>
  
  <p><strong>Hello.js</strong></p>
  
  <pre><code>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(
        &lt;div&gt;
          &lt;NumberWrap&gt;
            {
              this.state.placeholder.map(item =&gt;
              &lt;Numbers&gt;{item}
              {
                this.state.data.filter(item =&gt;
                this.state.addedItems.indexOf(item.id) !== -1).slice(0, 5).map(item =&gt;
                  &lt;Product {...item} remove={this.handleRemove} /&gt;
                )
              } 
              &lt;/Numbers&gt;
            )}
          &lt;/NumberWrap&gt;
  
  
          &lt;CardWrap&gt;
          {
            this.state.data.map(item =&gt;
              &lt;Product {...item} add={()=&gt;this.handleAdd(item.id)} /&gt;
            )}   
          &lt;/CardWrap&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p><strong>Product.js</strong></p>
  
  <pre><code>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 =&gt; {
    const { add, id, header, remove } = props;
    return (
      &lt;Card&gt;
        &lt;Header key={id}&gt;
          {header}
        &lt;/Header&gt;
        &lt;AddBtn onClick={add}&gt;Add&lt;/AddBtn&gt;
        &lt;AddBtn onClick={remove}&gt;Remove&lt;/AddBtn&gt;
      &lt;/Card&gt;
    );
  };
  
  export default Product;
  </code></pre>