Removing an indexed element from multiple array states

Question

I am trying to update the arrays of my states by removing the index of the value selected through filter but when I remove the first value of every array the entire array empties and when I try to remove any other index only some empty. I am not sure if the add functionality affects the states I have but I included it from its respective component. Adding Values Removing First Value in Array Removing Second Value in Array

const add = () => {

  setStockList([...stockList, {Tick:currentStock.symbol,Name:currentStock.name}]);

  setEnableRD([...enableRD, false]);
  setAlertPercentRD([...alertPercentRD, 1]);
  setAlertPriceRD([...alertPriceRD, 1]);
  setAlertedRD([...alertedRD, false]);
  setPriceOrPercentRD([...priceOrPercentRD, true]);
  setVolumeRD([...volumeRD, 0.5]);
  setSettings([...settings, false]);
   };

const removeThis = (ticker,index) => {

    setStockList(
      [...stockList].filter((val) => {
        if (val.Tick === ticker) return null;
        return val;
      })
    );
    setStorePriceAllHistory(
      [...storePriceAllHistory].filter((val) => {
        if (storePriceAllHistory.indexOf(val) === index) return null;
        return val;
      })
    );
    setStockPrice(
      [...stockPrice].filter((val)=>{
        if(stockPrice.indexOf(val) === index) return null;
        return val;
      })
    )
    setEnableRD(
      [...enableRD].filter((val) => {
        if (enableRD.indexOf(val) === index) return null;
        return val;
      })
    );
    setAlertPercentRD(
      [...alertPercentRD].filter((val) => {
        if (alertPercentRD.indexOf(val) === index) return null;
        return val;
      })
    );
    setAlertPriceRD(
      [...alertPriceRD].filter((val) => {
        if (alertPriceRD.indexOf(val) === index) return null;
        return val;
      })
    );
    setAlertedRD(
      [...alertedRD].filter((val) => {
        if (alertedRD.indexOf(val) === index) return null;
        return val;
      })
    );
    setPriceOrPercentRD(
      [...priceOrPercentRD].filter((val) => {
        if (priceOrPercentRD.indexOf(val) === index) return null;
        return val;
      })
    );
    setVolumeRD(
      [...volumeRD].filter((val) => {
        if (volumeRD.indexOf(val) === index) return null;
        return val;
      })
    );
    setSettings(
      [...settings].filter((val) => {
        if (settings.indexOf(val) === index) return null;
        return val;
      })
    );
  };

return (
  <>
{stockList.map((val, index) => {
 const { Tick, Name } = val;

return (
    <div className="stockItemIcon">
       <FaTrash
        className="trashCan"
        onClick={(e) => {
        e.stopPropagation();
        removeThis(Tick,index)}}
        ></FaTrash>
    </div>
   )}
   </>)

Answer 1

Function is a predicate, to test each element of the array. Return a value that coerces to true to keep the element, or to false otherwise. (Source)

Change your filter callback function to

[...settings].filter((val,i) => i !== index)