Delete items from state array and add this items another state array

Question

I'm want Delete items from state array and add this items another state array

deleteItem = (id) => {
this.setState(prevState => {
  const index = this.state.productData.findIndex(item => item.id === id); this.state.storeData[0].saveProducts.push(this.state.productData.slice(index, 1))
  return this.state.productData
 })
 }

Json StoreData , Saveproducts item of object in array

[ 
  { 
  "code": "f1", 
  "name": "storage-no-1", 
  "capacity": 125, 
  "temperture": -18,
  "humidity": 3 ,
  "saveProdoucts":[]
  }, 
 { 
  "code": "f2",
 "name": "storage-no-2",
 "capacity": 15, 
 "temperture": -18,
 "humidity": 25,
 "saveProdoucts":[]
  },
  {
   "code": "R3",
   "name": "storage-no-3", 
    "capacity": 40, 
    "temperture": 21,
    "humidity": 30,
     "saveProdoucts":[]
  } 
 ]

productData is an array consist of items you want to filter the array with the id , then remaining items should be saved in the storeData[o].saveProducts array . Is that what you are looking for — Beginner
– Beginner, Commented Jan 20, 2019 at 7:16
@DILEEP THOMAS i have a product list, i want add product list to store component whit A series validate : example a=a b=b c=c .. is Ok then add to Store — Dani
– Dani, Commented Jan 20, 2019 at 7:26
@Dani basically you are trying remove the item from product and add to the saveProducts array in the storedData — Beginner
– Beginner, Commented Jan 20, 2019 at 7:30

Beginner · Accepted Answer · 2019-01-20 07:47:53Z

2

please check the below sample code, on click of each item it will remove the item from the productData and add the corresponding item in the saveProducts property of the storedData.

I hope this will solve the issue. Please save the code in react local development and try to run it.

import React, { Component, Fragment } from 'react';

class App extends Component {

  state = {
    productData: [
      { id: 1, productName: "test 1" },
      { id: 2, productName: "test 2" },
      { id: 3, productName: "test 3" },
      { id: 4, productName: "test 4" }
    ],
    storedData: [{ saveProducts: [] }]
  }

  addItem = (id) => {
    const { productData } = this.state
    this.setState(prevState => ({
      productData: productData.filter(product => product.id !== id),
      storedData: [
        {
          saveProducts: [
            ...prevState.storedData[0].saveProducts,
            ...productData.filter(product => product.id === id)
          ]
        }
      ]
    })
    )
  }

  render() {
    // Destructuring 
    const { productData, storedData } = this.state
    return (
      <Fragment>
        <ul>
          {productData.map(product => {
            return (
              <li
                onClick={() => this.addItem(product.id)}
                key={product.id}>
                <p>{product.productName}</p>
              </li>
            )
          })}
        </ul>
        <h2>
          Saved Products
        </h2>
        {
          storedData[0].saveProducts.length > 0 ?
            storedData[0].saveProducts.map(product => {
              return (
                <p key={product.id}>
                  {product.productName}
                </p>
              )
            })
            :
            "No Products Selected"
        }
      </Fragment>
    );
  }
}

export default App;

answered Jan 20, 2019 at 7:47

Beginner

9,20011 gold badges50 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Samuel Liew Over a year ago

Comments are not for extended discussion; this conversation has been moved to chat.

Dani Over a year ago

@DILEEP THOMAS email id: [email protected]

Dani Over a year ago

@DILEEP THOMAS please send message to email and i,m send project

Beginner Over a year ago

@Dani please check your inbox

Collectives™ on Stack Overflow

Delete items from state array and add this items another state array

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related