javascript - remove placeholder when item is added to array React -

i have 5 positions number placeholder available items added array appear, problem need these numbered placeholders dissapear once item has been added array.

how can remove numbered placeholders when item added array?

https://codesandbox.io/s/qlp47q8j26

hello.js

import react 'react'; import update 'immutability-helper' import styled 'styled-components' import product './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: [],     }   }    handleadd = (id) => {     this.setstate({         addeditems: update(this.state.addeditems, {         $push: [           id,         ],       })     })   }    handleremove = (id) => {     const index = this.state.addeditems.indexof(id);     this.setstate({       addeditems: update(this.state.addeditems, {         $splice: [           [index, 1]         ],       })     })   }    render() {     return(       <div>         <numberwrap>           {             this.state.placeholder.map(num =>               <numbers>{num}               {                 this.state.data.filter(item => {                   return this.state.addeditems.indexof(item.id) === num - 1;                 }).slice(0, 5).map(item =>                   <product {...item} remove={() => { this.handleremove(item.id) }} />                 )               }                </numbers>             )           }         </numberwrap>           <cardwrap>         {           this.state.data.map(item =>             <product               {...item}               add={()=> {                 this.handleadd(item.id)                }}             />           )}            </cardwrap>       </div>     )   } } 

product.js

import react "react"; import styled "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; 

you should add array of added numbers state , render number if it's not exists in array.

1. i've added addedarray state in constructor.

2. modified handleadd , handleremove remove , add items new array.

3. added condition render {num} in render method.

this modified code hello.js component:

import react 'react'; import update 'immutability-helper' import styled 'styled-components' import product './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],       addedarray: [],       data: [         { id: 1, header: 'item 1'},         { id: 2, header: 'item 2'},         { id: 3, header: 'item 3'},         { id: 4, header: 'item 4'}       ],       addeditems: [],     }   }    handleadd = (id) => {     const nextadded = [id,...this.state.addedarray];     this.setstate({         addedarray: nextadded,         addeditems: update(this.state.addeditems, {         $push: [           id,         ],       })     })   }    handleremove = (id) => {     const index = this.state.addeditems.indexof(id);     const nextadded = this.state.addedarray.filter(n => n != id);     this.setstate({       addedarray: nextadded,       addeditems: update(this.state.addeditems, {         $splice: [           [index, 1]         ],       })     })   }    render() {     return(       <div>         <numberwrap>           {             this.state.placeholder.map(num =>               <numbers>               {this.state.addedarray.filter(n=> n ==num).length == 0 && num}               {                 this.state.data.filter(item => {                   return this.state.addeditems.indexof(item.id) === num - 1;                 }).slice(0, 5).map(item =>                   <product {...item} remove={() => { this.handleremove(item.id) }} />                 )               }                </numbers>             )           }         </numberwrap>           <cardwrap>         {           this.state.data.map(item =>             <product               {...item}               add={()=> {                 this.handleadd(item.id)                }}             />           )}            </cardwrap>       </div>     )   } }