How delete an object based on its index from a nested array in React?

Question

I click the icon 'delete' on the product. I pull out his index and save it in state. Example: select: 1,index: 1. How to set this.setState to delete an object nested in an array colors in array products. Example delete object:

{
  a: 'orange'
}

from array colors in array products

this.state.select is the item in the products, this.state.index is color in the item to delete

And how does it look in a real application? Give your products and colors id? I would like it to be dynamic. I click the product, download its index and delete

class App extends Component {
  constructor(){
    super();

    this.state {
      products: [  
            {
                colors: [{a:'black'}, {a:'orange'}, {a:'purple'}]
                desc: 'gfgfg'
            },
            {
                colors: [{a: 'yellow'}, {a: 'white'}, {a:'gray'}],
                desc: 'gfgfgfg'
            },
            {
                colors: [{a: 'pink'}, {a: 'brown'}, {a:'green'}],
                desc: 'gfgfgfg'
            }
        ],
        select: 1 //example
        index: 1 //example
    }

  }

  removeItem = () => {
    const { select, index } = this.state;

    if(index) {
      this.setState({
          products: [
            ...this.state.products[select].colors.slice(0, index),
            ...this.state.products[select].colors.slice(index + 1),
          ]
      });
    }
  };


  render () {

    return (
      <div>
        <ul>
            {
                this.state.products
                .map((product, index) =>
                    <Product
                        key={index}
                        index={index}
                        product={product}
                    />
                )
            }
        </ul>
          <Products

          />
      </div>
    )
  } 
}

So this.state.select is the item in the products to be deleted, and this.state.index the item under colors to be deleted? — Chris
– Chris, Commented Jun 18, 2019 at 13:52
this.state.select is the item in the products, this.state.index is color in the item to delete — Umbro
– Umbro, Commented Jun 18, 2019 at 13:55

Junius L · Accepted Answer · 2019-06-18 17:21:28Z

You need to pass the remove function to Product component, in Product component pass the select and index to removeItem function.

modify your remove item, to take in two parameters, select and index.

removeItem = (select, index) => {

  const filtered = this.state.products[select].colors.filter(
    (color, i) => i !== index
  );

  this.setState(prevState => {
    return {
      select: select,
      index: index,
      products: [
        ...prevState.products.slice(0, select),
        Object.assign({}, prevState.products[select], { colors: filtered }),
        ...prevState.products.slice(select + 1)
      ]
    };
  });
};

Pass the function as prop to Product component.

<div>
  <ul>
    {this.state.products.map((product, index) => (
      <Product
        key={index}
        index={index}
        removeItem={this.removeItem}
        product={product}
      />
    ))}
  </ul>
</div>

In your product component, pass the index of the color and the select.

<button onClick={() => removeItem(index, i)}>X</button>

DEMO

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>

<div id="root"></div>

<script type="text/babel">

class Product extends React.Component {
  render() {
    const { product, removeItem, index } = this.props;
    return (
      <div>
        <p>{product.desc}</p>
        <ul>
          {product.colors.map((color, i) => (
            <li>
              {color.a} <button onClick={() => removeItem(index, i)}>X</button>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      name: "React",
      products: [
        {
          colors: [{ a: "black" }, { a: "orange" }, { a: "purple" }],
          desc: "gfgfg"
        },
        {
          colors: [{ a: "yellow" }, { a: "white" }, { a: "gray" }],
          desc: "gfgfgfg"
        },
        {
          colors: [{ a: "pink" }, { a: "brown" }, { a: "green" }],
          desc: "gfgfgfg"
        }
      ],
      select: 1, //example
      index: 1 //example
    };
  }

    removeItem = (select, index) => {
      const filtered = this.state.products[select].colors.filter(
        (color, i) => i !== index
      );

      this.setState(prevState => {
        return {
          select: select,
          index: index,
          products: [
            ...prevState.products.slice(0, select),
            Object.assign({}, prevState.products[select], { colors: filtered }),
            ...prevState.products.slice(select + 1)
          ]
        };
      });
    };

  render() {
    return (
    <div>
      <ul>
        {this.state.products.map((product, index) => (
          <Product
            key={index}
            index={index}
            removeItem={this.removeItem}
            product={product}
          />
        ))}
      </ul>
    </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
</script>

Shilly · Accepted Answer · 2019-06-18 14:02:51Z

0

Just use Array.filter() to create a new array not containing the specific element. So your new color array for that desc is:

this.state.products[select].colors.filter( color => color.a !== 'orange' )

This keeps all the colors where a is not orange. Keep in mind that arrays are zero-based, so your select and index should both start at 0.

If you do not want to store the actual indexes, use the desc instead.

So if select would be gfgfg instead of the array index, you could do:

const state = {
  products: [
      {
          colors: [{a:'black'}, {a:'orange'}, {a:'purple'}],
          desc: 'gfgfg'
      },
      {
          colors: [{a: 'yellow'}, {a: 'white'}, {a:'gray'}],
          desc: 'gfgfgfg'
      },
      {
          colors: [{a: 'pink'}, {a: 'brown'}, {a:'green'}],
          desc: 'gfgfgfg'
      }
  ],
  selected_product: 'gfgfg',
  color: 'orange'
};

const setState = update => Object.assign( state, update );

console.log( 'before update' );
console.log( JSON.stringify( state.products[0] ));

setState({
  products: state.products.map( product => {
    if ( product.desc === state.selected_product ) {
      product.colors = product.colors.filter( color => color.a !== state.color );
    }
    return product;
  })
});

console.log( 'after update' );
console.log( JSON.stringify( state.products[0] ));

Same logic can obviously be done using the indexes, but that might result in longer code. Might have to update some of the code if everything has to be fully immutable.

answered Jun 18, 2019 at 14:02

Shilly

8,5991 gold badge20 silver badges24 bronze badges

2 Comments

Umbro Over a year ago

This is not what I expected. And how does it look in a real application? Give your products and colorom id? I would like it to be dynamic. I click the product, download its index and delete

Shilly Over a year ago

Give all products an unique id, like the id coming from the products database. Include that id as a data attribute. on the row. Find the product again in the collection. I always work by id since that allows me to use basic hyperlinks without the need to add a click events to translate the index back into an actual product identifier.

Collectives™ on Stack Overflow

How delete an object based on its index from a nested array in React?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related