Is it fine to ignore errors? [closed]

I am writing an npm package which provides non-vital functionalities for a web page.

I think that the end user visiting the page doesn’t really need to know whether these extra functionalities are working.

So could I put try/catch all over the place without taking actions in the catch? Basically suppressing any error from my package.

Or should I consider myself having the duty to deliver eventual errors to the developer using my package?

I’m working with an npm package here, but the question is relevant more in general for any piece of code, like a function: would it be ok to suppress any error thrown by a function if the result of that function is not vital for the execution of the outer code?

htmx.ajax only called twice when making multiple queries

I am using Alpinejs’ $watch() on a given property inside multiple x-data blocks to call htmx.ajax with a custom handler whenever that property changes.

Debugging in the browser I can see those calls are being executed as expected, but only 2 network requests are sent and the callback handler is only executed twice even though .ajax() had been executed many more times.
The requests seem to correspond to the first and last call, and everything in-between is somehow lost. The behavior is the same on both Firefox and Chromium so I doubt it is a browser limitation, but I couldn’t find anything in the htmx documentation concerning the maximum number of Ajax requests per tick..

I am at a total loss here, any insight into what might be going on would be greatly appreciated. Thanks!

Why won’t my webpage update based on the JSON I am providing it? [closed]

I am trying to make my website dynamically construct itself based on a JSON object I pass into it which is written in a separate JSON file. I have the files linked properly but it doesn’t seem to update my page at all or even have any idea what the function is I wrote in my javascript; the console says jsonIn is undefined. Here is my code

HTML :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic JSON Events</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&family=ZCOOL+QingKe+HuangYou&display=swap');

        html, body {
            width: 100%;
            height: 100%;
            background-color: rgb(26, 20, 33, 0.8);
            overflow: hidden;
            margin: 0;
        }

        body {
            display: grid;
            grid-template-areas: 
            'header header header header header'
            'navbar mbody mbody mbody mbody'
            'navbar mbody mbody mbody mbody'
            'navbar mbody mbody mbody mbody'
            'fnotes fnotes fnotes fnotes fnotes';
            gap: 1%;
            padding: 1%;
            width: 100%;
            height: 100%;
        }


        @media screen and (max-width: 800px) {
            html {
                aspect-ratio: 1024/768;
                width: 100%;
                height: 100%;
            }
        }

        @media screen and (max-width: 320px) {
            html {
                aspect-ratio: 375/812;
                width: 100%;
                height: 100%;
            }
        }

        #title {
            grid-area: header;
            font-family:'ZCOOL QingKe HuangYou', cursive;
            color: rgb(233,178,77);
            text-align: center;
            font-size: 48px;;
        }

        #name-color {
            color: rgb(236, 86, 125);
            font-style: normal;
        }

        :hover #title {
            color: rgb(115, 229, 158);
        }

        #site-nav {
            grid-area: navbar;
            display: flex;
            flex-flow: column nowrap;
            width: 100%;
            list-style: none;
        }

        #main {
            grid-area: mbody;
            color:ghostwhite;
            font-family: 'Libre Baskerville';
            font-size: 24px;
            text-align: center;
            width: 100%;
            height: 100%;
            padding: 5%;
        }

        #footer {
            grid-area: fnotes;
        }
    </style>
</head>
<body>
    <h1 id="title">Hello my name is <em id="name-color">Anton</em></h1>
    <time id="timestamp">

    </time>
    <nav role="navigation" id="site-nav">
        <ul id="sitemap">

        </ul>
    </nav>
    <main role="main" id="main">

    </main>
    <footer role="contentinfo" id="footer">
        <section id="content-info" role="contentinfo">

        </section>
        <form id="contact-form" role="form">

        </form>
    </footer>
<script type="javascript" src="./jsofun.js"></script>
</body>
</html>

Javascript:

let post1 = require('./post1.json')
window.addEventListener('load', jsonIn, false);
window.addEventListener('DOMContentLoaded', jsonIn, false);
function jsonIn(post1) {
    var title = window.document.getElementById("title");
    var timestamp = window.document.getElementById("timestamp");
    var sitemap = window.document.getElementById("sitemap");
    var main = window.document.getElementById("main");
    var contact_form = window.document.getElementById("contact-form");
    var content_info = window.document.getElementById("content-info");
    title.textContent = post1.title;
    timestamp.textContent = String(Date.now());
    main.textContent = post1.main.join();
}

jsonIn(post1);

JSON:

{
    "title" : "First blog post using JSON",
    "timestamp": "",
    "sitemap": {
        "Homepage":"../index.html",
        "Cryptography": "./Cryptography/index.html",
        "Homework": "../cs212/homework/",
        "Minecraft": "./minecraft.html"
        },
    "main": [
        "This was my first attempt at creating a dynamic templated web page which I am going to be",
        "using to refine and form a blog. This post was parsed entirely from JSON and templated",
        "into my webpage. I am excited to learn more about how this can play into even more dynamic",
        "websites and even network driven events when using <em>encoding/json</em> in my GoLang backend."
    ],
        "contact_form": {},
        "content_info": ""
}

Remove value from an array nested in an object

I have a problem with my code. I currently have some data like the one below;

 users: [
    {
      name: 'bolu',
      features: ['Tall'],
    },
    {
      name: 'cam',
      features: ['Bearded', 'Short'],
    },
  ],
};

What I am trying to do is delete/remove a single feature – for example if I pass in ‘short’ into my redux action. I’d like for it (the ‘Short’ text) to be removed from the features array. I currently have my redux action set up this way:

export interface UsersDataState {
  name: string,
  features: Array<string>,
}

export interface UsersState {
  users: UsersDataState[];
}

const initialState: UsersState = {
  users: [],
};

    export const usersSlice = createSlice({
      name: 'users',
      initialState,
      reducers: {
        removeUser: (state, action: PayloadAction<string>) => {
          const removedUsers = state.users.filter((user) => user.features.indexOf(action.payload));
          state.users = removedUsers;
        },
       },
   });

So here I am passing in the value in (action.payload is the value being passed in). When this action is dispatched, I want to remove just the word that is passed in from the features array. I hope this is clearer now.

This doesn’t work for some reason and I am unable to figure out why. Any help would be appreciated please, thank you.

jQuery Page Scrolling Animation

I am trying to create a page scrolling feature on my website using jQuery. Everything works, except that I want it to accept the first scroll event and block any other scroll events until the animation has finished (700ms) before accepting a new scroll event.

I tried setting a timeout, but that paused the process and then continued after the timeout rather than blocking any input from the scroll event.

<section style="max-height: 101vh; min-height: 100vh; height:100%; overflow: hidden">
    <div id="container" data-scroll="0" style="height: 100vh; overflow-y:hidden;">
        <div class="scrollbit" style="transition: all; transition-duration: 700ms;">
            <div data-id="0" class="active" style="height: 100vh; background: red; transition-duration: 700ms;"></div>
            <div data-id="1" style="height: 100vh; background: green; transition-duration: 700ms;"></div>
            <div data-id="2" style="height: 100vh; background: yellow; transition-duration: 700ms;"></div>
            <div data-id="3" style="height: 100vh; background: blue; transition-duration: 700ms;"></div>
        </div>
    </div>
</section>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
</script>

<script>
    function doScroll(direction) {
        var active = $('.active').attr('data-id')
        active = Number(active)
        if (event.deltaY == -100) {
            if (active != 0) {
                active = Number(active) - Number(1);
                $('.scrollbit').animate({ textIndent: 0 }, {
                    step: function (now, fx) {
                        $(this).css('transform', 'translateY(-' + (Number(active) * 100) + 'vh')
                    }, duration: 'slow',
                }, 'linear');
                $('.active').removeClass('active')
                $('[data-id="' + active + '"]').addClass('active')
            }
        }
        if (event.deltaY == 100) {
            var elem = '[data-id="' + (Number(active) + 1) + '"]';
            if ($(elem).length != 0) {
                active = Number(active) + Number(1);

                $('.scrollbit').animate({ textIndent: 0 }, {
                    step: function (now, fx) {
                        $(this).css('transform', 'translateY(-' + (Number(active) * 100) + 'vh')
                    }, duration: 'slow',
                }, 'linear');
                $('.active').removeClass('active')
                var target = '[data-id="' + active + '"]';
                $('[data-id="' + active + '"]').addClass('active')
            }
        }
    }

    window.addEventListener("wheel", event => doScroll(event));

</script>

<style>
    body {
        margin: 0;
    }
</style>

VS Code: Lit custom element not rendering properly

I’ve copied/pasted the code from lit.dev’s playground page to troubleshoot and attempt to get Lit running in VS Code before working on my own project. I was able to troubleshoot most of my issues and finally got it to run correctly, but it seems that the custom element ‘simple-greeting’ is simply not rendering upon launch.

Here’s my html:

<!DOCTYPE html>
<head>
  <script type="module" src="./app.js"></script>
</head>
<body>
  <simple-greeting name="World"></simple-greeting>
</body>

Here’s my js:

import {html, css, LitElement} from 'lit';

export class SimpleGreeting extends LitElement {
  static styles = css`p { color: blue }`;

  static properties = {
    name: {type: String},
  };

  constructor() {
    super();
    this.name = 'Somebody';
  }

  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}
customElements.define('simple-greeting', SimpleGreeting);

Here’s my launch.json:

{
    "version": "0.2.0",
    "configurations": [
    
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",            
            "file": "${workspaceRoot}/index.html"
        }
    ]
}

Here’s my jsconfig:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "experimentalDecorators": true,
    "allowJs": true
  },
}

And finally, here’s my package.json:

{
  "name": "epigraph_tictactoe",
  "version": "1.0.0",
  "description": "",
  "main": "index.html",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "Cameron Crane",
  "license": "ISC",
  "type": "module",
  "dependencies": {
    "common-js": "^0.3.8",
    "lit": "^2.2.0",
    "ts-node": "^10.7.0"
  }
}

Why won’t my custom element render? Chrome itself launches, but the page is blank unless I add another test component like <p>Hello, World!</p>, which seems to work just fine.

Why is my D3 svg not showing on the screen?

Here is my code! I am using angular and d3 library to make a simple shape but nothing shows up on the screen.

TS File:

export class PieChartComponent {
  svg = d3
    .select('#canvasarea')
    .append('svg')
    .attr('width', 400)
    .attr('height', 100);

  circle = this.svg
    .append('circle')
    .attr('cx', 200)
    .attr('cy', 200)
    .attr('fill', 'blue');
}

HTML File:

<div id="canvasarea"></div>

Highcharts is not defined webpack

Im trying to install Highcharts with npm on my project and im gettin this error

Uncaught referenceError: Highcharts is not defined.

I followed the docs and i can not draw a chart.

This is in my app.js

var Highcharts = require('highcharts'); // Load module after Highcharts is loaded require('highcharts/modules/exporting')(Highcharts);

and this is in my blade.php

<script>
  Highcharts.chart('container', { /Highcharts options/ });
</script>

PD: i have use npm run dev but it still not working.

please solve my code i can’t able to edit and delete the local storage value please help me out. local storage delete and edit button not working [closed]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="box">
        <input type="hidden" id="index">
        <div class="group">
            <label for="">Enter Name</label>
            <input type="text" id="name" class="container">
        </div>

        <div class="group">
            <label for="">Enter Phone</label>
            <input type="number" id="phone" class="container">
        </div>

        <div class="group">
            <label for="">Enter Email id</label>
            <input type="email" id="email" class="container">
        </div>

        <div class="group">
            <label for="" >Enter Address</label>
            <textarea id="address" cols="30" rows="10"></textarea>
        </div>

        <div class="group">
            <button id="btn-book">add</button>
        </div>


    </div>


    <div class="container">
    <table class="table" id="tbl">
        
    </table>
</div>
    <script src="books.js"></script>
</body>
</html>

<script>
var Books=[]

function BindBooks(books){
    

    var row=`<tr><th>id</th><th>name</th><th>phone</th><th>email</th><th>address</th><th>action</th></tr>`;
    books.forEach(function(book,i){
        row += `<tr><td>${i+1}</td><td>${book.name}</td><td>${book.phone}</td><td>${book.email}</td><td>${book.address}</td><td><a href="#" onclick=edit(${i})><button id="edit">edit</button></a> <a href="#" onclick=del(${i})><button id="del">delete</button></a></td></tr>`;

    })
    document.getElementById("tbl").innerHTML=row;
    
}
function del(i){
    
    event.preventDefault();
    Books.splice(i,1);
    BindBooks(Books);
}

function edit(i){
    var book=Books[i];
    document.getElementById("name").value=book.name;
    document.getElementById("phone").value=book.phone;
    document.getElementById("email").value=book.email;
    document.getElementById("address").value=book.address;
    document.getElementById("index").value=i;
    document.getElementById("btn-book").innerText="Update"
    console.log(Books,"hi")

}

function AddBook()
{
    
    var name=document.getElementById("name").value;
    var phone=document.getElementById("phone").value;
    var email=document.getElementById("email").value;
    var address=document.getElementById("address").value;
    var index=document.getElementById("index").value;
    var book={name,phone,email,address};
    let user={
        name:name,
        phone:phone,
        email:email,
        address:address,
    
    }
    
    if(index=="" || index==undefined)
    {
    console.log("am heated",Books)
    Books.push(user);
    if(localStorage.getItem('user')==null){
        localStorage.setItem('user',JSON.stringify(Books));
        console.log(Books,"good evening")
    }
    else{
        localStorage.getItem('user')!=null
        localStorage.setItem('user',JSON.stringify(Books));
        console.log(Books,"good evening")

    }
    
    }
    else{
        Books.splice(index,1,book);
        document.getElementById("btn-book").innerText="Add"
    
    }
    
    BindBooks(Books);
    ClearForm();
    console.log(Books)
}


function ClearForm()
{
    document.getElementById("name").value="";
    document.getElementById("phone").value="";
    document.getElementById("email").value="";
    document.getElementById("address").value="";
}
document.getElementById("btn-book").addEventListener("click",AddBook);
BindBooks(Books);

</script>

I don’t know how to get slash commands working for my dice command

I am trying to make a dice slash command with command handler that posts a picture of the dice but it says url1 undefined and when I try just posting the pictures directly it says interaction failed this interaction has already begin acknowledged

module.exports= {
 name: "diceslash",
 description:"dice slashcommand",
 execute(interaction){
     const diceroll = Math.floor(Math.random() * 6) + 1
     const dices = Math.floor(Math.random() * 6) + 1

     const ans = diceroll + dices;

     if (diceroll == 1){
         const url1 = 'https://imgur.com/a/YdAmiRe';
     }
     if (diceroll == 2){
         const url1 = 'https://imgur.com/a/w35gKMR';
     }
     if (diceroll == 3){
         const url1 = 'https://imgur.com/a/MkDVhQS';
     }
     if (diceroll == 4){  
         const url1 = 'https://imgur.com/a/WCuaCbL';         
     }
     if (diceroll == 5){
         const url1 = 'https://imgur.com/a/0xyPIkx';
     }
     if (diceroll == 6){
         const url1 = 'https://imgur.com/a/urv1H42';
     }
     if (dices == 1){
         const url2 = 'https://imgur.com/a/YdAmiRe';
     }
     if (dices == 2){
         const url2 = 'https://imgur.com/a/w35gKMR';
     }
     if (dices == 3){
         const url2 = 'https://imgur.com/a/MkDVhQS';
     }
     if (dices == 4){  
         const url2 = 'https://imgur.com/a/WCuaCbL';         
     }
     if (dices == 5){
         const url2 = 'https://imgur.com/a/0xyPIkx';
     }
     if (dices == 6){
         const url2 = 'https://imgur.com/a/urv1H42';
     }
  
     interaction.reply ({content: url1+" "+url2})
     interaction.reply({content: "you got "+ ans})
     
 }
}

Simo Ahava or Google doc? Question on dataLayer.push({ ecommerce: null });

While setting up GTM I came across a crossroad and I don’t know which option is best, and why.

Simo Ahava declares window.dataLayer before any snippet, and does not clear the ecommerce object

Screenshot of a snippet by Simo, using window.dataLayer and not clearing ecommerce object

On the other side, Google recommends clearing the ecommerce object before any ecommerce event to prevent any potential issues with variables using datalayer v1. The way google puts it is “to prevent multiple ecommerce events on a page from affecting each other”

Google clears ecommerce object and uses a different syntax

Google’s method sounds better to me here, although Simo is arguably the most respected guy in the tracking space.

So which method is the best, and why?

Trying to access an array in an object results in error – Undefined property: stdClass::$files

I’m passing an object which contains an array as form input. When I try to access the array (and count the elements) I get the error Undefined property: stdClass::$files

When I var_dump the whole object I get this, which is expected:

object(stdClass)[29]
  public '6' => 
    object(stdClass)[28]
      public 'files' => 
        array (size=0)
          empty
      public 'packages' => 
        array (size=1)
          0 => string 'program_data/6/packages/1646756076.zip' (length=38)
      public 'scripts' => 
        array (size=1)
          0 => string 'program_data/6/scripts/MEER_munger.py' (length=37)

I’m trying to check if the files array is empty. In my code I have this:

foreach($selectedFiles as $key=>$d){
  var_dump($d->files);
  if (count($d->files)!==0) {                    
      mkdir($dir.'/files');
      foreach($d->files as $file) {
        $source = FCPATH.$file;
        $fileName = substr($file, strrpos($file, '/') + 1);
        copy($source,$dir.'/files/'.$fileName);
      }
   }
}

the var_dump of $d->files shows me an empty array. So if it’s an array, why is count($d->files) throwing an error?

Thank you for the help!

Manage Sessions, chosing the right ID with Firebase Auth for web

As I needed to authenticate the user of an app, I’ve chosen for something the most straightforward possible, so I thought using Firebase would be a good fit.

So, I ran into the docs (I’m skipping the prerequisites here for the sake of concision):
Create a password-based account

Sign in a user with an email address and password

Handle the sign-in flow with the Firebase SDK

So I succeed to send an authentication request with login/pass and Google.

So now, correct me if I’m wrong, but, I think I need to make the following steps:

  1. Pass a session_ID to my back-end (a svelte endpoint call by a classic http post request I suppose).

  2. Then, the back-end can store the session_ID in a database associated with the corresponding user_ID

  3. Call a function on each private page of the back-end that will check if the session_ID provided by the front-end exists, then serve the page or redirect the user.

The thing is … I get a huge object back from Firebase Auth and I have to confess that I’m a little lost here… You can see below what I get back when I sign-in with an account using both login/pass and Google authentication.

Which ID am I supposed to take as a session_ID and which one as a user_ID ?

I can see:

  • accessToken & refreshToken in the stsTokenManager property
  • accessToken & refreshToken in the credential property
  • idToken
  • uid or Google auth
  • uid for login/Pass auth
  • uid for I don’t know (see “proactiverefresh”)
  • federatedId
  • rawId
  • localID
    …

Thank you for your help 🙂

{
  "providerId": "firebase",
  "emailVerified": true,
  "isAnonymous": false,
  "tenantId": null,
  "providerData": [
    {
      "providerId": "google.com",
      "uid": "100373089962418343181", <--------
      "displayName": "Robert Smith",
      "email": "[email protected]",
      "phoneNumber": null,
      "photoURL": null
    },
    {
      "providerId": "password",
      "uid": "[email protected]",      <--------
      "displayName": "Robert Smith",
      "email": "[email protected]",
      "phoneNumber": null,
      "photoURL": null
    }
  ],
  "proactiveRefresh": {
    "user": {
      "uid": "qEOrRfkIkyMgqHNaRvABPKf2WTZ2",  <--------
      "email": "[email protected]",
      "emailVerified": true,
      "displayName": "Robert Smith",
      "isAnonymous": false,
      "photoURL": null,
      "providerData": [
        {
          "providerId": "google.com",
          "uid": "100373089962418343181",
          "displayName": "Robert Smith",
          "email": "[email protected]",
          "phoneNumber": null,
          "photoURL": null
        },
        {
          "providerId": "password",
          "uid": "[email protected]",
          "displayName": "Robert Smith",
          "email": "[email protected]",
          "phoneNumber": null,
          "photoURL": null
        }
      ],
      "stsTokenManager": {
        "refreshToken": "XjoPcMzMi ...IAKI",
        "accessToken": "iuJhbGciOiJSUzI1NiI ... Sj1AcJGpsUw",
        "expirationTime": 1647453201017
      },
      "createdAt": "1632145000204",
      "lastLoginAt": "1647449600973",
      "apiKey": "EIzaDyACBh...q7YYrBB",
      "appName": "[DEFAULT]"
    },
    "isRunning": false,
    "timerId": null,
    "errorBackoff": 30000
  },
  "reloadUserInfo": {
    "localId": "qEOrRfkIkyMgqHNaRvABPKf2WTZ2", <--------
    "email": "[email protected]",
    "displayName": "Robert Smith",
    "photoUrl": null,
    "passwordHash": "AiVEOFJURDZ=",    <-------- ??
    "emailVerified": true,
    "passwordUpdatedAt": 1647445046758,
    "providerUserInfo": [
      {
        "providerId": "google.com",
        "displayName": "Robert Smith",
        "photoUrl": null,
        "federatedId": "100373089962418343181",<--------
        "email": "[email protected]",
        "rawId": "100373089962418343181"<--------
      },
      {
        "providerId": "password",
        "displayName": "Robert Smith",
        "photoUrl": null,
        "federatedId": "[email protected]",<--------
        "email": "[email protected]",
        "rawId": "[email protected]"<--------
      }
    ],
    "validSince": "1647445046",
    "lastLoginAt": "1647449600973",
    "createdAt": "1632145000204",
    "emailLinkSignin": true,
    "lastRefreshAt": "2022-03-16T16:53:20.973Z"
  },
  "reloadListener": null,
  "uid": "qEOrRfkIkyMgqHNaRvABPKf2WTZ2",
  "auth": {
    "apiKey": "EIzaDyACBhHedUIhOIXiTjfipSWOlxZIq7YYrBB",
    "authDomain": "test-project-999999.firebaseapp.com",
    "appName": "[DEFAULT]",
    "currentUser": {
      "uid": "qEOrRfkIkyMgqHNaRvABPKf2WTZ2",
      "email": "[email protected]",
      "emailVerified": true,
      "displayName": "Robert Smith",
      "isAnonymous": false,
      "photoURL": null,
      "providerData": [
        {
          "providerId": "google.com",
          "uid": "100373089962418343181",
          "displayName": "Robert Smith",
          "email": "[email protected]",
          "phoneNumber": null,
          "photoURL": null
        },
        {
          "providerId": "password",
          "uid": "[email protected]",
          "displayName": "Robert Smith",
          "email": "[email protected]",
          "phoneNumber": null,
          "photoURL": null
        }
      ],
      "stsTokenManager": {
        "refreshToken": "XjoPc...IAKI",
        "accessToken": "iuJh...psUw",
        "expirationTime": 1647453201017
      },
      "createdAt": "1632145000204",
      "lastLoginAt": "1647449600973",
      "apiKey": "EIzaDyACBhHedUIhOIXiTjfipSWOlxZIq7YYrBB",
      "appName": "[DEFAULT]"
    }
  },
  "stsTokenManager": {
    "refreshToken": "XjoPc...IAKI",<--------
    "accessToken": "iuJh...psUw",<--------
    "expirationTime": 1647453201017
  },
  "accessToken": "iuJh...psUw",<--------
  "displayName": "Robert Smith",
  "email": "[email protected]",
  "phoneNumber": null,
  "photoURL": null,
  "metadata": {
    "createdAt": "1632145000204",
    "lastLoginAt": "1647449600973"
  },
  "credential": {
    "idToken": "eyJhbGciOi...nMI-ciozQ",<--------
    "accessToken": "ya29.A0AR...9qXUQ",<--------
    "pendingToken": null,
    "providerId": "google.com",
    "signInMethod": "google.com"
  }
}

How to pass in a string as a single value and not a split value

I have a function called onClick of a div that calls a dispatch function, and passes in the target value into it (i.e e.target.value). The value being passed in, is being stored in an array.

However, I noticed something weird going on. In the array the value is being passed into, the first value is stored wrongly.

For instance if I pass in 'hello', in the array, it is stored as ['h','e','l','l','o']. And this only happens with the first value that is passed in, the rest are stored properly.

This is my function, the one called onClick;

const handleSelectedFilters = (e: any) => {
  dispatch(
    actions.storeData({
      name: data.name,
      values: e.target.value,
    }),
  );
}

And this is the action in my reducer file;

export interface DataState {
  name: string,
  values: Array<string>,
}

export interface FilterState {
  storedData: DataState[];
}

applyData: (
      state,
      action: PayloadAction<DataState>,
    ) => {
        state.storedData.push({
          name: action.payload.name,
          values: [...action.payload.values],
        });
    },

Please any help will be appreciated as I am really stuck. What do I need to do differently?