I need to remove items from an array dynamically when the value is been changed in react

Question

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.

you can check something is `null` by simply do this `some_var === null`. — Layhout, May 19 '23 at 04:42
I tried this as well but it also was giving me the same result — rasif sahl, May 19 '23 at 04:44
Does this answer your question? [Why is isNaN(null) == false in JS?](https://stackoverflow.com/questions/115548/why-is-isnannull-false-in-js) — showdev, May 19 '23 at 04:49
you should `console.log(state)` before if statement to make sure it only holds null or integer. — Layhout, May 19 '23 at 04:51
You should give more detail. Should give us a link that elaborated the issue you are having using code sandbox or something else. — GoonGamja, May 19 '23 at 05:39
`!isNaN(null)` and `!isNaN(1)` both return `true`. See [Why is isNaN(null) == false in JS?](https://stackoverflow.com/questions/115548/why-is-isnannull-false-in-js) — showdev, May 19 '23 at 05:48

score 0 · Answer 1 · answered May 19 '23 at 06:05

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])

Saad Ali · Answer 2 · 2023-05-19T04:48:39.570

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;

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, May 19 '23 at 11:33

I need to remove items from an array dynamically when the value is been changed in react

2 Answers2