Question 171701 in Javascript Question posted in
A very good W3school tutorial can be found here.

Can I remove items from an array dynamically when the value is changed in React?

I need some help removing values from an array.
This is the array

[
    {
        "label": "One",
        "value": "one"
    },
    {
        "label": "Two",
        "value": "two"
    },
    {
        "label": "Three",
        "value": "three"
    },
    {
        "label": "Four",
        "value": "four"
    },
    {
        "label": "Five",
        "value": "five"
    }
]

This is the code which I tried

useEffect(() => {
            let od = [...options?.stockModeList]
            let dc; 

            if (!isNaN(state?.parentVariant)){
                dc = od.splice(options.length - 2, 2);
            } else {
                dc = od.splice(0, 3);
            }

 // and also I tried this as well

if (state?.parentVariant === null){
                dc = od.splice(options.length - 2, 2);
            } else {
                dc = od.splice(0, 3);
            }
            
            // console.log(dc)

    }, [ options?.stockModeList, state?.parentVariant])

The state?.parentVariant variable is updating dynamically when the UI is changing it will mostly be a null value or integer value. So if its a null then I need to run the first statement and if it is an integer then I need to run the else statement.

But the issue is even after the value is been changed it always stays in the if statement.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I created a new array as stockModeOptions to save the updated array data. And I wrote 02 conditions to check whether its a null or whether it's an empty string.

    And also there was a typo in the `od.splice(od.length -2,2); I was parsing the wrong data as well.

    And also I am updating this useEffect each and everytime when the entire state updates as well

        useEffect(() => {
        let od = [...options?.stockModeList]

        if (state?.parentVariant === '' || state?.parentVariant === null){
            od.splice(od.length - 2, 2);
        } else {
            od.splice(0, 3);
        }

        setOptions((state) =>({
            ...state,
            stockModeOptions : od,
        }))

    }, [state])

  2. 0 
    import React, { useState } from 'react';

function MyComponent() {
  const [items, setItems] = useState([{
    "label": "One",
    "value": "one"
}, {
    "label": "One",
    "value": "two"
}, {
    "label": "One",
    "value": "three"
},]); // your arrays item

  const handleValueChange = (index, newValue) => {
    // Create a new array with the updated value
    const updatedItems = [...items];
    updatedItems[index] = newValue;

    // Update the state with the new array
    setItems(updatedItems);
  };

  const handleRemoveItem = (index) => {
    // Create a new array without the item to be removed
    const updatedItems = items.filter((_, i) => i !== index);

    // Update the state with the new array
    setItems(updatedItems);
  };

  return (
    <div>
      {items.map((item, index) => (
        <div key={index}>
          <input
            type="text"
            value={item}
            onChange={(e) => handleValueChange(index, e.target.value)}
          />
          <button onClick={() => handleRemoveItem(index)}>Remove</button>
        </div>
      ))}
    </div>
  );
}

export default MyComponent;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search