Can’t perform a React state update on an unmounted component. useEffect React-Native

I’m developing a chat app using react-native, node, mongoose, socket.io, the problem is, when using socket.io, when I send message from user1 to user2, I’m able to receive the sent message from user1 but the useEffect doesn’t re-renders the component to add the new message into the array of messages even though I have entered the correct dependencies. Below is the code for reference:

This is my MessageScreen & I have defined socket outside the scope of functional component MessageScreen:

const socket = io('ws://192.168.29.123:8080', {
    transports: ['websocket'],
}); // declared outside the functional component

const [arrivalMessage, setArrivalMessage] = useState(null);

    useEffect(() => {
        socket.on('getMessage', data => {
            console.log('received: ',data);
            setArrivalMessage({
                matchId: matchId,
                senderId: data.senderId,
                text: data.text,
                createdAt: Date.now(),
                updatedAt: Date.now(),
            });
        });
        console.log('arrival msg: ',arrivalMessage);
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [arrivalMessage, socket]);

    useEffect(() => {
        // ensures we don't get anyother user's msg
        arrivalMessage &&
        match.includes(arrivalMessage.senderId) &&
        setMessages((prev) => [...prev, arrivalMessage]);
    }, [arrivalMessage, match]);

    useEffect(() => {
        socket.emit('addUser', uid);
    }, [uid]);

Although I’m receiving the correct data from my friend but the state is not updating & therefore I’m not able to display real-time messages.
So, whenever I send a message from 1 user to another, this is my console output which confirms that I am able to receive the message from that user & obviously the title error:

LOG  received:  {"senderId": "61b5d1725a7ae2994", "text": {"matchId":"61b5d172511867ae298c", "senderId": "61b5d1725a7ae2994", "text": "me too!"}}
ERROR  Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. in MessageScreen (at SceneView.tsx:126)
LOG  received:  {"senderId": "61b5d1725a7ae2994", "text":{"matchId":"61b5d111867ae298c","senderId":"61b5d1725a7ae2994", "text": "me too!"}}

It would be really helpful if someone could point out what is wrong here!
Thank you!

How to: Target an img through NASAs api

I’m currently learning about importing data from an api and I’ve been trying to get some images from Nasa.
I had luck with the Picture of the Day,

const apodImg = async () => {
  //importing the picture
  const header = { headers: { Accept: "application/json" } };
  const res = await axios.get(
    "https://api.nasa.gov/planetary/apod?api_key=LXzoeDP12bLimV0TdOVjJeI2uQa1TXAHmVtdkky1",
    header
  );
  console.log(res.data.hdurl);
  //output on webpage
  const img = document.querySelector("#apod");
  img.src = res.data.url;
};
apodImg();

but not with getting images or just an image from the Mars project. The image is too nested in objects and arrays for me to know how to target it.

I took this api address to the webapp Postman and received the following data.
https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?earth_date=2015-6-3&api_key=LXzoeDP12bLimV0TdOVjJeI2uQa1TXAHmVtdkky1

{ "photos": [
        {
            "id": 102685,
            "sol": 1004,
            "camera": {
                "id": 20,
                "name": "FHAZ",
                "rover_id": 5,
                "full_name": "Front Hazard Avoidance Camera"
            },
            "img_src": "http://mars.jpl.nasa.gov/msl-raw-images/proj/msl/redops/ods/surface/sol/01004/opgs/edr/fcam/FLB_486615455EDR_F0481570FHAZ00323M_.JPG",
            "earth_date": "2015-06-03",
            "rover": {
                "id": 5,
                "name": "Curiosity",
                "landing_date": "2012-08-06",
                "launch_date": "2011-11-26",
                "status": "active"
            }
        }

I tried to target the img_src but I doubting that the underscore ‘_’ is legit in JavaScript. Anyway it’s not working for me. I’m getting this error in the console (Chrome):

nasa.js:23 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'img_src') at marsImg

Can someone guide me onwards. Thanks in advance!

How to use a module with types defined in a .d.ts file?

I started using react-native-web, and trying to do so with typescript. So far not much success. According this question, if I create a .d.ts file, typescript will get the types from there, but the values will be get from the not .d.ts files.

For me it throws 'Icon' only refers to a type, but is being used as a value here..

I’m using it in a file called Spinner.tsx, importing it like: import { Icon } from '../Icon';, my file structure looks like:

Icon
  index.native.tsx
  index.web.tsx
  index.d.ts

index.native.tsx:

import React, { FC } from 'react';
import { ViewStyle } from 'react-native';
import RNVIcon from 'react-native-vector-icons/Ionicons';
import { IconProps } from './index.web';

export const Icon: FC<Omit<IconProps, 'style'> & { style: ViewStyle }> = ({ name, ...props }) => {
  const RNVIName = name
    .replace(/io/i, '')
    .replace(/[A-Z][a-z]*/g, (str) => '-' + str.toLowerCase() + '-')
    .replace(/--/g, '-')
    .replace(/(^-)|(-$)/g, '');

  return <RNVIcon name={RNVIName} {...props} />
};

index.web.tsx:

import React, { CSSProperties, FC } from 'react';
import * as Icons from 'react-icons/io5';
import { ViewStyle } from 'react-native';

export type IconProps = {
  name: keyof typeof Icons;
  size?: number;
  color?: string;
  style?: ViewStyle;
}

export const Icon: FC<Omit<IconProps, 'style'> & { style: CSSProperties }> = ({ name, ...props }) => {
  const Component = Icons[name];

  return <Component {...props} />
}

index.d.ts:

import { FC } from "react";
import { IconProps } from "./index.web";

export type Icon = FC<IconProps>

I have tried with default export as well, no success. What am I doing wrong?

Uncaught ReferenceError: cve_entrada is not defined at HTMLSpanElement.onclick

I am using Datatable’s ServerSide, in which I need to put a modal for the “update” option but it does not execute the function to obtain the data, the data through the serverside if I bring it but the update I do not retrieve.

function consultar(){
    $(document).ready(function() {
    $('#tableMatPrima').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "serverSideentradas.php",
        "lengthMenu": [[15, 30, 45], [15, 30, 45]],
        "order": [3, 'desc'],
        "searching": true,
        "bDestroy": true,
        "columnDefs":[
                        {
                            "targets": [1, 2, 3, 4],
                            "className": 'dt-body-center'
                        },
                        {
                            "targets": 4,
                            "render": function(data, type, row, meta){
                                const cve_entrada = data;
                                return '<span class= "btn btn-warning" onclick= "obtenerDatos(cve_entrada)" data-toggle="modal" data-target="#modalMatPrimaUpdate" data-whatever="@getbootstrap"><i class="fas fa-edit"></i> </span>'
                            }
                        }
                    ],

     "language": {
         "lengthMenu": "Mostrar _MENU_ registros por página.",
         "zeroRecords": "No se encontró registro.",
         "info": "  _START_ de _END_ (_TOTAL_ registros totales).",
         "infoEmpty": "0 de 0 de 0 registros",
         "infoFiltered": "(Encontrado de _MAX_ registros)",
         "search": "Buscar: ",
         "processing": "Procesando...",
                  "paginate": {
             "first": "Primero",
             "previous": "Anterior",
             "next": "Siguiente",
             "last": "Último"
         }

     }

    } );
} );
}

function obtenerDatos(cve_entrada) {
    $.getJSON("modelo_entradas.php?consultar="+cve_entrada, function(registros){

        $('#comb_idu').val(registros[0]['cve_entrada']);
        $('#comb_mat_primau').val(registros[0]['nombre']);
        $('#comb_cantidadu').val(registros[0]['cantidad_entrada']);
    });
}

Need to Add third dropdown and remove the second web page opens in IE to close

I have made a request form for my group to make it easier for them to request for help desk. At the moment I have two dropdowns – I have the main request dropdown when the user selects from the first dropdown selection it goes to the second dropdown selection for the user to select. I want to add the third dropdown so when the user selects from the second dropdown it opens more selection in the third dropdown based on what category the user has selected for the Second dropdown.

Also since all of us no the Internet Explorer is going to get decommission so i have web pages that run on IE, but i want them to force open them in Edge, i have written the code that works but it opens the Edge and the IE pages but i want to keep only the Edge webpage and close the IE page

The Edge code is very top on the page

$(function() {
    // on page load wrap all select-2 options in span so they cannot be selected without specifying select-1
    $('#select-2 option:not([selected])').wrap('<span/>');
});
// when select-1 is changed, hide all options that do not have the class corresponding to the value of select-1
$('#select-1').change(function() {
    $('#select-2 span > option').unwrap();
    console.log($('#select-1'));
    $('#select-2 option:not(.' + $('#select-1').val() + ', [selected])').wrap('<span/>');
    //console.log($('#select-2').val());
});

$('#select-2').trigger('change');

$(document).ready(function() {
    $("#otherFieldGroupMod").hide();
    $("#otherFieldGroupRes").hide();
    $("#otherFieldGroupRem").hide();
    $("#otherFieldGroupOutacc").hide();
    $("#outlookAccountDistri").hide();
    $("#otherFieldGroupWinacc").hide();
    $("#otherFieldGroupKdrive").hide();
    $("#otherFieldGroupDcnet").hide();
    $("#otherFieldGroupResPass").hide();
    $("#otherFieldGroupValpo").hide()
});

//AS400 NEW ACCOUNT SCRIPT//
$(function() {
    $("#select-2").change(function() {
        if ($(this).val() == "AS400 New Account") {   //AS400 New Account //
            $("#otherFieldGroupNewacc").show();
            $('#otherFieldGroupNewacc').attr('required','');
        } else {
            $("#otherFieldGroupNewacc").hide();
            $('#otherFieldGroupNewacc').removeAttr('required');
        }

        if ($(this).val() == "Modify Account") {  //AS400 Modify Account //
            $("#otherFieldGroupMod").show();
        } else {
            $("#otherFieldGroupMod").hide();
        }

        if ($(this).val() == "Reset Password") {   //AS400 Reinstate Account //
            $("#otherFieldGroupRes").show();
        } else {
            $("#otherFieldGroupRes").hide();
        }

        if ($(this).val() == "Remove Password") {  //AS400 Remove Account //
            $("#otherFieldGroupRem").show();
        } else {
            $("#otherFieldGroupRem").hide();
        }
    

        if ($(this).val() == "Outlook New Account") {    //Outlook New Account//
            $("#otherFieldGroupOutacc").show();
        } else {
            $("#otherFieldGroupOutacc").hide();
        }

        if ($(this).val() == "Add to Distribution List") {    //Outlook Add to Distribution List//
            $("#outlookAccountDistri").show();
        } else {
            $("#outlookAccountDistri").hide();
        }


        if ($(this).val() == "Windows New Account") {     //Windows New Account//
            $("#otherFieldGroupWinacc").show();
        } else {
            $("#otherFieldGroupWinacc").hide();
        }

        if ($(this).val() == "K Drive and Group Access") {     //Windows K Drive and Group Access//
            $("#otherFieldGroupKdrive").show();
        } else {
            $("#otherFieldGroupKdrive").hide();
        }

        if ($(this).val() == "DC Net") {     //Windows DC Net Access//
            $("#otherFieldGroupDcnet").show();
        } else {
            $("#otherFieldGroupDcnet").hide();
        }

        if ($(this).val() == "Password Reset") {     //Windows Reset Password//
            $("#otherFieldGroupResPass").show()
            && $("#userEmail").hide()
            && $(".btn-submit").hide();
        } else {
            $("#otherFieldGroupResPass").hide()
            && $("#userEmail").show()
            && $(".btn-submit").show();
        }

 

        if ($(this).val() == "Valpo New Account") {    //New Valpo Access//
            $("#otherFieldGroupValpo").show();
        } else {
            $("#otherFieldGroupValpo").hide();
        }
    });
});

$(function() {
    // on page load wrap all select-2 options in span so they cannot be selected without specifying select-1
    $('#select-4 option:not([selected])').wrap('<span/>');
});

// when select-1 is changed, hide all options that do not have the class corresponding to the value of select-1
$('#select-3').change(function() {
    $('#select-4 span > option').unwrap();
    $('#select-4 option:not(.' + $('#select-3').val() + ', [selected])').wrap('<span/>');
    //console.log($('#select-2').val());
});

$('#select-4').trigger('change');
<script>
    if(/MSIE d|Trident.*rv:/.test(navigator.userAgent)) {
        window.location = 'microsoft-edge:' + 'http://www.walmart.com';
        setTimeout(function() {
            //window.location = 'https://go.microsoft.com';
        }, 1);
    }
</script>
<!DOCTYPE html>
<html>
    <head>
        <title>ID Request Form</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <link href="contact-view.css" rel="stylesheet">
    </head>
    <body>
        <div class="testbox">
            <form name="frmContact" id="frmContact" method="post" action="" enctype="multipart/form-data" class="p-3">
                <div class="banner">
                    <h1>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;ID Request Form</h1>
                </div>
                <br>
                <p>Please fill out with the information that is requested below and submit the id request form. Thank you!</p>
                <div class="form-group">
                    <label>Request Type</label>
                    <select id="select-1" name="select-1" class="form-control w-100" required>
                        <option selected value="">--Select an option--</option>
                        <option value="AS400">AS400</option>        <!-- "option-1" -->
                        <option value="Outlook">Outlook</option>    <!-- "option-2" -->
                        <option value="Windows">Windows</option>    <!-- "option-3" -->
                        <option value="Valpo">Valpo</option>        <!-- "option-4" -->
                    </select>
                    <br/>
                    <label>Choose a Sub-Category</label>
                    <select id="select-2" name="select-2" class="form-control w-100" required>
                        <option selected value="">--Select an option--</option>
                        <option value="AS400 New Account" class="AS400">AS400 New Account</option>                  <!-- "option-1a" -->
                        <option value="Modify Account" class="AS400">Modify Account</option>                        <!-- "option-1b" -->
                        <option value="Reset Password" class="AS400">Reset Password</option>                        <!-- "option-1c" -->
                        <option value="Remove Password" class="AS400">Remove Account</option>                       <!-- "option-1d" -->
                        <option value="Outlook New Account" class="Outlook">Outlook New Account</option>            <!-- "option-2a" -->
                        <option value="Add to Distribution List" class="Outlook">Add to Distribution List</option>  <!-- "option-2b" -->
                        <option value="Windows New Account" class="Windows">Windows New Account</option>            <!-- "option-3a" -->
                        <option value="K Drive and Group Access" class="Windows">K Drive and Group Access</option>  <!-- "option-3b" -->
                        <option value="DC Net" class="Windows">DC Net</option>                                      <!-- "option-3c" -->
                        <option value="Password Reset" class="Windows">Password Reset</option>                      <!-- "option-3d" -->
                        <option value="Valpo New Account" class="Valpo">Valpo New Account</option>                  <!-- "option-4a" -->
                    </select>
                </div>
                <hr>
              >
                <!--AS400 New Account-->
                <div class="form-group" id="otherFieldGroupNewacc">
                    <h2>AS400 New Account</h2><hr>
                    <div class="row">
                            <div class="col-6">
                                <label for="userRequestor">Full Name</label>
                                <input type="text" class="form-control w-100" id="userRequestor" name="userRequestor" placeholder="Type Here..." value="<?php if(isset($_SESSION['data']['Requestor Name'])) echo $_SESSION['data']['Requestor Name']; ?>">
                            </div>
                            <br><br>
                        <div class="col-6">
                            <label for="userTM">Beneficiary (Full Name)</label>
                            <input type="text" class="form-control w-100" id="userTM" name="userTM"placeholder="Type Here...">
                        </div>
                        <br><br>
                        <div class="col-6">
                            <label for="userEmployee">Employee ID</label>
                            <input type="text" class="form-control w-100" id="userEmployee" name="userEmployee" placeholder="Type Here...">
                        </div>
                        <br>
                        <div class="col-6">
                            <label for="selectJob">New Job Category</label>
                            <select id="selectJob" name="selectJob" class="form-control w-100" placeholder="*Click in box for Job Category List*">
                                <option disabled selected value="">Select an option</option>
                                <option value="NO CHANGE">NO CHANGE</option>
                                <option value="ADMCLK = Admin Clerk">ADMCLK = Admin Clerk</option>
                                <option value="ADMCLK+ = Admin Clerk w/ Manual Book">ADMCLK+ = Admin Clerk w/ Manual Book</option>
                                <option value="ADMMGR = Admin MGR w/ Manual Book">ADMMGR = Admin MGR w/ Manual Book</option>

                            </select>
                        </div>
                        <br>
                        <div class="col-6">
                            <label for="userNewAS400">New AS400 ID</label>
                            <input type="text" class="form-control w-100" id="userNewAS400" name="userNewAS400" placeholder="Type Here...">
                        </div>
                    </div>
                </div>
                <!--Modify AS400 Account-->
                <div class="form-group" id="otherFieldGroupMod">
                    <h2>AS400 Modify Account</h2><hr>
                    <div class="row">
                        <div class="col-6">
                            <label for="userRequestorMod">Requester (Full Name)</label>
                            <input type="text" class="form-control w-100" id="userRequestorMod" name="userRequestorMod"placeholder="Type Here...">
                        </div>
                        <br><br>
                        <div class="col-6">
                            <label for="userTMMod">Beneficiary (Full Name)</label>
                            <input type="text" class="form-control w-100" id="userTMMod" name="userTMMod" placeholder="Type Here...">
                        </div>
                        <br><br>
                        <div class="col-6">
                            <label for="userEmployeeMod">Employee ID</label>
                            <input type="text" class="form-control w-100" id="userEmployeeMod" name="userEmployeeMod" placeholder="Type Here...">
                        </div>
                        <br><br>
                        <div class="col-6">
                            <label for="userAS400Mod">AS400 ID</label>
                            <input type="text" class="form-control w-100" id="userAS400Mod" name="userAS400Mod" placeholder="Type Here...">
                        </div>
                        <br>
                        <div class="col-6">
                            <label for="selectJobsMod">New Job Category</label>
                            <select id="selectJobsMod" name="selectJobsMod" class="form-control w-100" placeholder="*Click in box for Job Category List*">
                                <option disabled selected value="">Select an option</option>
                                <option value="NO CHANGE">NO CHANGE</option>
                                <option value="ADMCLK = Admin Clerk">ADMCLK = Admin Clerk</option>
                                <option value="ADMCLK+ = Admin Clerk w/ Manual Book">ADMCLK+ = Admin Clerk w/ Manual Book</option>
                                <option value="ADMMGR = Admin MGR w/ Manual Book">ADMMGR = Admin MGR w/ Manual Book</option>

                            </select>
                        </div>
                        <br>
                        <div class="col-6">
                            <label for="userNewAS400Mod">New AS400 ID&emsp;<strong>***Leave Blank If No Change***</strong></label>
                            <input type="text" class="form-control w-100" id="userNewAS400Mod" name="userNewAS400Mod" placeholder="Type Here...">
                        </div>
                    </div>
                </div>
                <!--Reinstate AS400 Account-->
                <div class="form-group" id="otherFieldGroupRes">
                    <h2>AS400 Reinstate Password</h2><hr>
                    <div class="row">
                        <div class="col-6">
                            <label for="userRequestorRe">Requester (Full Name)</label>
                            <input type="text" class="form-control w-100" id="userRequestorRe" name="userRequestorRe"placeholder="Type Here...">
                        </div>
                        <br><br>
                        <div class="col-6">
                            <label for="userTMRe">Beneficiary (Full Name)</label>
                            <input type="text" class="form-control w-100" id="userTMRe" name="userTMRe" placeholder="Type Here...">
                        </div>
                        <br><br>
                        <div class="col-6">
                            <label for="userEmployeeRe">Employee ID</label>
                            <input type="text" class="form-control w-100" id="userEmployeeRe" name="userEmployeeRe" placeholder="Type Here...">
                        </div>
                        <br><br>
                        <div class="col-6">
                            <label for="userAS400Re">AS400 ID</label>
                            <input type="text" class="form-control w-100" id="userAS400Re" name="userAS400Re" placeholder="Type Here...">
                        </div>
                    </div>
                </div>
                <!--Remove AS400 Account-->
                <div class="form-group" id="otherFieldGroupRem">
                    <h2>AS400 Remove Account</h2><hr>
                    <div class="row">
                        <div class="col-6">
                            <label for="userRequestorRes">Requester (Full Name)</label>
                            <input type="text" class="form-control w-100" id="userRequestorRes" name="userRequestorRes"placeholder="Type Here...">
                        </div>
                        <br>
                        <div class="col-6">
                            <label for="userTMRes">Terminated TM (Full Name)</label>
                            <input type="text" class="form-control w-100" id="userTMRes" name="userTMRes" placeholder="Type Here...">
                        </div>
                        <br>
                        <div class="col-6">
                            <label for="userEmployeeRes">Employee ID</label>
                            <input type="text" class="form-control w-100" id="userEmployeeRes" name="userEmployeeRes" placeholder="Type Here...">
                        </div>
                        <br>
                        <div class="col-6">
                            <label for="userAS400Res">AS400 ID</label>
                            <input type="text" class="form-control w-100" id="userAS400Res" name="userAS400Res" placeholder="Type Here...">
                        </div>
                        <br>
                        <div class="col-6">
                            <label for="hideInputRes">Reason</label>
                            <input type="text" class="form-control w-100" id="hideInputRes" name="hideInputRes" title="Example: Fired, Retired, Leave of Absence, etc..." placeholder="Type Here...">
                        </div>
                    </div>
                </div>
       
                <!--New Account-->
                <div class="form-group" id="otherFieldGroupOutacc">
                <h2>Outlook New Account</h2><hr>
                    <div class="row">
                        <div class="col-6">
                            <label for="userReqNewOutlook">Full Name</label>
                            <input type="text" class="form-control w-100" id="userReqNewOutlook" name="userReqNewOutlook" placeholder="Type Here...">
                        </div>
                        <br><br>
                        <div class="col-6">
                            <label for="userEmpNewOutlook">Employee ID</label>
                            <input type="text" class="form-control w-100" id="userEmpNewOutlook" name="userEmpNewOutlook" placeholder="Type Here...">
                        </div>
                        <br><br>
                        <div class="col-6">
                            <label for="oneIDNewOutlook">ONE ID (Formally Authenticator ID)</label>
                            <input type="text" class="form-control w-100" id="oneIDNewOutlook" name="oneIDNewOutlook" placeholder="Type Here...">
                        </div>
                        <br><br>
                    </div>
                </div>
                <!--Add to Distribution List-->
                <div class="form-group" id="outlookAccountDistri">
                    <h2>Add to Distribution List</h2><hr>
                        <div class="row">
                        <div class="col-6">
                            <label for="userReqOutlookDist">Full Name</label>
                            <input type="text" class="form-control w-100" id="userReqOutlookDist" name="userReqOutlookDist" placeholder="Type Here...">
                        </div>
                        <br><br>
                        <div class="col-6">
                            <label for="oneIDOutlookDist">ONE ID (Formally Authenticator ID)</label>
                            <input type="text" class="form-control w-100" id="oneIDOutlookDist" name="oneIDOutlookDist" placeholder="Type Here...">
                        </div>
                        <br><br>
                        <div class="col-6">
                            <label for="select-5">Select a Distribution List</label>
                            <select id="select-5" name="select-5" class="form-control w-100" placeholder="*Click in box for Distribution List*">
                                <option disabled selected value="">Choose a Distribution List</option>
                                <option value="WoodlandDInsuffAitems">WoodlandDInsuffAitems</option>
                                    
                            </select>
                        </div>
                    </div>
                </div>
      
                <!--Windows New Account-->
                <div class="form-group" id="otherFieldGroupWinacc">
                    <h2>Windows New Account</h2><hr>
                    <div class="row">
                        <div class="col-6">
                            <label for="userReqWinAcnt">Full Name</label>
                            <input type="text" class="form-control w-100" id="userReqWinAcnt" name="userReqWinAcnt" placeholder="Type Here...">
                        </div>
                        <br><br>
                        <div class="col-6">
                            <label for="userEmpWinAcnt">Employee ID</label>
                            <input type="text" class="form-control w-100" id="userEmpWinAcnt" name="userEmpWinAcnt" placeholder="Type Here...">
                        </div>
                        <br><br>
                        <div class="col-6">
                            <label for="oneIDWinAcnt">ONE ID (Formally Authenticator ID)</label>
                            <input type="text" class="form-control w-100" id="oneIDWinAcnt" name="oneIDWinAcnt" placeholder="Type Here...">
                        </div>
                        <br><br>
                        <div class="col-6">
                            <label for="userMirror"> Mirror Account ONE ID</label>
                            <input type="text" class="form-control w-100" id="userMirror" name="userMirror" placeholder="Type Here...">
                        </div>
                        <br><br>
                        <div class="col-6">
                            <label for="userComment">Comments</label>
                            <input type="text" class="form-control w-100" id="userComment" name="userComment" placeholder="Type Here...">
                        </div>
                    </div>
                </div>
                <!--K Drive and Group Access-->
                <div class="form-group" id="otherFieldGroupKdrive">
                    <h2>K Drive and Group Access</h2><hr>
                    <div class="row">
                        <div class="col-6">
                            <label for="userReqDrive">Full Name</label>
                            <input type="text" class="form-control w-100" id="userReqDrive" name="userReqDrive" placeholder="Type Here...">
                        </div>
                        <br><br>
                        <div class="col-6">
                            <label for="userEmpDrive">Employee ID</label>
                            <input type="text" class="form-control w-100" id="userEmpDrive" name="userEmpDrive" placeholder="Type Here...">
                        </div>
                       
                    </div>
                </div>
                <!--DC Net Access-->
                <div class="form-group" id="otherFieldGroupDcnet">
                    <h2>DC Net Access</h2><hr>
                    <div class="row">
                        <div class="col-6">
                            <label for="userReqDCNET">Full Name</label>
                            <input type="text" class="form-control w-100" id="userReqDCNET " name="userReqDCNET" placeholder="Type Here...">
                        </div>
                        <br><br>
                        <div class="col-6">
                            <label for="userEmpDCNET">Employee ID</label>
                            <input type="text" class="form-control w-100" id="userEmpDCNET" name="userEmpDCNET" placeholder="Type Here...">
                        </div>
                        <br><br>
                        <div class="col-6">
                            <label for="oneIDDCNET">ONE ID (Formally Authenticator ID)</label>
                            <input type="text" class="form-control w-100" id="oneIDDCNET" name="oneIDDCNET" placeholder="Type Here...">
                        </div>
                        <br>
                        <div class="col-6">
                            <label>Select your Job Title</label>
                            <select id="select-3" name="select-3" class="form-control w-100">
                                <option selected value="">Select an option</option>
                                <option value="TM">TM</option>
                                <option value="DCS">DCS</option>
                      
                            </select>
                            <br>
                            <label>Select your Department & Shift</label>
                            <select id="select-4" name="select-4" class="form-control w-100">
                                <option selected value="">Select an option</option>
                                <option value="Cost Recovery" class="TM">Cost Recovery</option>
                                <option value="Lean Captain" class="TM">Lean Captain</option>
                          
                            </select>
                        </div>
                    </div>
                </div>
                <!--Password Access-->
                <div class="form-group" id="otherFieldGroupResPass">
                    <h2>Reset Windows Password</h2><hr>
                    <div class="col-6">
                        <label for="otherField11">Click the link for Reset Password Help</label>
                        <a href="http://wddc.walgreens.com/Forms/Password Resets & Account Unlocks for Direct Reports.pdf">Password Resets & Account Unlocks for Direct Reports</a>
                    </div>
                </div>
               <!---VALPO Account->
                 <!--New Account-->
                <div class="form-group" id="otherFieldGroupValpo">
                    <h2>Valpo New Account</h2><hr>
                        <div class="row">
                            <div class="col-6">
                                <label for="userReqValpo">Full Name</label>
                                <input type="text" class="form-control w-100" id="userReqValpo" name="userReqValpo" placeholder="Type Here...">
                            </div>
                            <br><br>
                           
                        </div>
                    </div>
                    <!--Sending Email-->
                    <div class="form-group" id="userEmail">
                        <div class="row">
                            <div class="col-6">
                                <label for="userEmail">Enter your Email</label>
                                <input type="text" class="form-control w-100" name="userEmail" placeholder="Type Here..." pattern="[email protected]" value="<?php if(isset($_SESSION['data']["Requestor's Email"])) echo $_SESSION['data']["Requestor's Email"]; ?>">
                            </div>
                        </div>
                    </div>
                    <div class="form-group" id="message">
                        <?php display_message(); ?>
                    </div>
                    <input type="submit" name="send" class="btn-submit" value="Send" />
            </form>
        </div>
        <script src="hide-show-fields-form.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
    </body>
</html>

Active menu item based on URL and ID

I want to have active menu items in my navigation based on URL and ID, not href. None of the available solutions (this one, this one , or this one) worked for me.

My Navigation looks like this

<nav id="PageNavigation">
    <div class="nav_ebene_2">
        <div role="button" class="nav-item" id="P_Bogendaten.aspx?IDNavi=194">
            <p>menu item 1</p>
        </div>
    </div>
</nav>

The URL, if clicked on menu item 1, is https://example.de/App_AspxFiles/P_Bogendaten.aspx?IDNavi=194. I want to add the class menuactive to the parent element (div which includes nav_ebene_2)

I need to compare the id with the current url, if it matches, add menuactive. This would be my way, but the if conditions is never true.

  var currenturl  = window.location.href
  for (const div of document.querySelectorAll("#PageNavigation nav-item")) {
    if (div.id == currenturl ) {
      div.parentElement.classList.add("activemenu");
    }
  }

Thank you very much!

Chanel ID returns undifined DISCORD JS V13

I have a question I am currently upgrading my Discord bot to DISCORD JS V13. Now I’m trying to get the Chanel ID of certain Chanels, but I keep getting undifiend or 0 back. I’ve already tried to rewrite my old code from the DISCORD JS V12, but it doesn’t work. There is also not much online about DISCORD JS V13.

const path = require("path");
const fs = require('fs');
const {
    Client,
    Intents,
    Collection
} = require('discord.js');
require("dotenv").config();

const client = new Client({
    intents: [Intents.FLAGS.GUILDS]
})
const functions = fs.readdirSync("./src/functions").filter(file => file.endsWith(".js"));
const eventFiles = fs.readdirSync("./src/events").filter(file => file.endsWith(".js"));
const commandFiles = fs.readdirSync("./src/commands").filter(file => file.endsWith(".js"));

client.commands = new Collection();
client.buttons = new Collection();

(async () => {
    for (file of functions) {
        require(./functions/${file})(client);
    }

    client.handleEvents(eventFiles, "./src/events");
    client.handleCommands(commandFiles, "./src/commands");
    client.handleButtons();
    client.login(process.env.BOT_TOKEN);
    const connection = client.dbLogin();
    console.log(await client.channels);
    client.channels.fetch('691022255098036375')
        .then(channel => console.log(channel.name))
        .catch(console.error);
    console.log(await client.channels.cache.get("691022255098036375")); //undefined
    //client.joinHome();
})();

live search in input with checkbox filter value

I have a select in which the checkbox is located, it also contains an input through which I want to find the necessary items. I did the search like this, first I accept an array and then lowercase it and search for matches. Somehow I need to match the required id to exclude unavailable ones and display the necessary checkboxes

In simple terms, I want to filter my query and display it in real time.

I must use only vanila JS

let search = document.getElementById("search"); 
let s = document.querySelectorAll("input[type=checkbox][name=one]");

//s.forEach((item) => {
search.addEventListener("input", () => {
  let data = [];
  
  let count = Array.from(s).map((i) =>  i.value.toLowerCase().includes(search.value.toLowerCase())
  );

  console.log(count);
  
});
//});
<div id="checkboxes2">
        <div class="control">
          <input
            class="input"
            type="text"
            placeholder="Поиск"
            id="search"
          />
          <span class="icon is-small is-left">
            <span class="searchIcon"></span>
          </span>
        </div>
        <label for="one2" class="select_label">
          <input type="checkbox"  value="Показать все" name="one" id="one2" />Показать все
          <span class="select_label-icon"></span
        ></label>
        <label for="one2" class="select_label">
          <input type="checkbox"  value="Показать все" name="one" id="one2" />Показать все
          <span class="select_label-icon"></span
        ></label>

        <label for="one2" class="select_label">
          <input type="checkbox"  value="Показать все" name="one" id="one2" />Показать все
          <span class="select_label-icon"></span
        ></label>
        <label for="one2" class="select_label">
          <input type="checkbox"  value="Показать все" name="one" id="one2" />Показать все
          <span class="select_label-icon"></span
        ></label>
        <label for="one2" class="select_label">
          <input type="checkbox" name="one2" id="one2" />Показать все
          <span class="select_label-icon"></span
        ></label>
        <label for="one3" class="select_label">
          <input type="checkbox" value="Наименование лекарства" name="one" id="one3" />Наименование лекарства
          <span class="select_label-icon"></span
        ></label>
        <label for="one4" class="select_label">
          <input type="checkbox" value="Наименование лекарства" name="one" id="one4" />Наименование лекарства
          <span class="select_label-icon"></span
        ></label>
        <label for="one5" class="select_label">
          <input type="checkbox" value="Наименование лекарства в две длинных строки" name="one" id="one5" />Наименование лекарства
          в две длинных строки <span class="select_label-icon"></span
        ></label>
      </div>

enter image description here

Html table horizontal scroll in the middle like on touchscreens

I’m trying to horizontal scroll the table not with the scrolling bar, but with the mouse inside the table just like its done with a touch screen. Does anyone know if its possible to do this without a plugin? To make the table horizontally “draggable” just for scrolling?

Ps.: I know that the snippet below does what I want in mobile mode, but I want to achieve that with the mouse.

.container {
  width: 30em;
  overflow-x: auto;
  white-space: nowrap;
}
<div class="container">
  <table>
    <tbody>
      <tr>
        <td>Image 1</td>
        <td>Image 2</td>
        <td>Image 3</td>
        <td>Image 4</td>
        <td>Image 5</td>
        <td>Image 6</td>
        <td>Image 1</td>
        <td>Image 2</td>
        <td>Image 3</td>
        <td>Image 4</td>
        <td>Image 5</td>
        <td>Image 6</td>
      </tr>
      <tr>
        <td>Image 1</td>
        <td>Image 2</td>
        <td>Image 3</td>
        <td>Image 4</td>
        <td>Image 5</td>
        <td>Image 6</td>
        <td>Image 1</td>
        <td>Image 2</td>
        <td>Image 3</td>
        <td>Image 4</td>
        <td>Image 5</td>
        <td>Image 6</td>
      </tr>
    </tbody>
  </table>
</div>

enter image description here

Issue With Clicks Inside Mousedown

I have multiple buttons that can be clicked by mousedown/touchstart, after 2 seconds, you get a popup to make sure, and you can click “yes” or “no”.

The issue comes when you click one, then select “no” and click another one. When logging the “data-id”, the first one clicked is the one passed, instead of the clicked one.

I thought this was an event.preventDefault(), event.stopImmediatePropagation issue, but this is not helping me at all, I don’t know what else to try anymore or know WHY this is happening.

Here’s a preview of the JS file:

$('.btn').on('mousedown touchstart', function (e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    let button = $(this);
    console.log('Before setTimeOut: ', button.attr('data-treatment-id'));
    
    timer = setTimeout(async function() {
    $('#make-sure-location').show();
    
    $('#not-in').on('click', function(e) {
      console.log('not in location: ', button.attr('data-treatment-id'));
      e.preventDefault();
      e.stopImmediatePropagation();
      $('#make-sure-location').hide();
      clearTimeout();
    });

    $('#inside').on('click', function(e) {
      console.log('on location: ', button.attr('data-treatment-id'));
      e.preventDefault();
      e.stopImmediatePropagation();
    });
    
  }, 2000)
})

Here’s a working fddle:
https://jsfiddle.net/rj8ofLym/28/

To recreate issue:

  1. MouseDown first button
  2. Click “No” on div.
  3. Check logs (correct “data-id”)
  4. MouseDown second button
  5. Click “No” on div.
  6. Check logs (INcorrect “data-id” – still first one)

push (redirect) to a route after successful login

Till now I was redirecting to the User Dashboard from the React component, but I want to apply a different approach, I want to redirect after getting the success response from the saga itself.

For this, I have attempted to use redux-first-history (which comes with the support of react-router6) I have followed their documentation, almost everything is working but an action @@router/CALL_HISTORY_METHOD getting called twice.

Here are my routes

export default function App() {
  return (
    <AuthProvider>
      <Router history={history}>
        <Routes>
          <Route element={<Layout />}>
            <Route path="/" element={<PublicPage />} />
            <Route path="/login" element={<LoginPage />} />
            <Route
              path="/protected"
              element={
                <RequireAuth>
                  <ProtectedPage />
                </RequireAuth>
              }
            />
          </Route>
        </Routes>
      </Router>
    </AuthProvider>
  );
}

which goes across the project, below is my store.

import { applyMiddleware, compose, createStore } from "redux";
import { persistReducer, persistStore } from "redux-persist";
import storage from "redux-persist/lib/storage";
import createSagaMiddleware from "redux-saga";
import rootReducer from "../store/reducers";
import { watchAuth } from "../store/sagas/index";
import { createReduxHistoryContext } from "redux-first-history";
import { createBrowserHistory } from "history";

const composeEnhancers =
  process.env.NODE_ENV === "development"
    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    : null || compose;

const { createReduxHistory, routerMiddleware } = createReduxHistoryContext({
  history: createBrowserHistory(),
  oldLocationChangePayload: true,
  showHistoryAction: true,
});
const sagaMiddleware = createSagaMiddleware();
const middleware = [sagaMiddleware, routerMiddleware];
const persistConfig = {
  key: "root",
  storage,
  whitelist: ["auth"],
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = createStore(
  persistedReducer,
  composeEnhancers(applyMiddleware(...middleware)),
);
const persistor = persistStore(store);
sagaMiddleware.run(watchAuth);

export const history = createReduxHistory(store);
export default store;
export { persistor };

and my Saga

import { call, delay, put } from "redux-saga/effects";
import axios from "../../../config/axios";
import {
  authFail,
  authStart,
  authSuccess,
  checkAuthTimeout,
  logout,
  logoutSucceed,
  setAlert,
} from "../../actions/auth/auth";
import { LOGIN_API } from "../../apiCollecitions";
import { push } from "redux-first-history";

export function* authLoginSaga(action) {
  yield put(authStart());

  const authData = {
    email: action.email,
    password: action.password,
  };
  try {
    const response = yield axios.post(
      `${LOGIN_API}?lng=${localStorage.getItem("i18nextLng")}&active=true`,
      authData,
    );
    yield localStorage.setItem("token", response.data.token);
    yield localStorage.setItem("expirationDate", expirationDate);
    yield put(authSuccess(response.data.token));
    yield put(push("/protected")); //should redirect to the specified route
  } catch (error) {
    yield put(authFail(error.response.data.message));
  }
}

I have also set up a sample GitHub repo for the same, for your reference.

NUXT JS insert Array inside Array and display forEach

Good afternoon everyone!

I’m stuck since 3 days searching answers in forums and here also, and i can’t solve it.. Maybe you can help about this problem:

In javascript is easier, but in NUXT we can’t insert Javascript where we wan’t..

In the component page:

<script>
  async fetch() {
      this.ArraySkills= await fetch(`https://api.test/player/${id}`
      ).then((res) => res.json ())
      
    },
    data () {
      return {
        ArraySkills: []
      }
    }
</script>

This url is a test. But it’s return an array about skills of player 1. I already display the skills of this player.

But i need to display the forEach players, their skills (40 players).

I created an ArraySkills. And i would like to visit the url1, url2, url3 etc.. And to push() inside the ArraySkills

In pure JS i would done :

let id=1
while (id<41) {
 id++;
  async fetch() {
      this.ArraySkill= await fetch(`https://api.test/player/${id}`
      ).then((res) => res.json ())

    },

   ArraySkills.push(ArraySkill);

}
#And then he will fill the ArraySkills with the 40 players

But in Nuxt it's seems harder :/

React Native Components Do Not Recognize Taps

I have just recently switched to React navigation v6 in my RN app and I can’t seem to understand why my Button(s) and Touchable(s) do not recognize onPress function the second time they are being pushed.

The scenario:

  1. I launch Home Screen.
  2. Press go to test screen button. The console prints the message.
  3. On Test Screen press go back. The console prints the message. I go back.
  4. Back on the Home Screen the button doesn’t work anymore. Console does not print the message

Home.tsx

<View style={{ flex: 1, paddingTop: 30 }}>
      <Button
        title='go to test screen'
        onPress={() => {
          console.log('pressed to test');
          navigate(TEST_SCREEN);
        }}
      />
</View>

TestScreen.tsx

<View style={{flex: 1, paddingTop: 30}}>
   <Button
     title='go back'
     onPress={() => {
       console.log('pressed go back');
       goBack();
     }}
   />
</View>

navigate func:

export function navigate(name: string, params?: any | undefined) {
  if (navigationRef.isReady()) {
    navigationRef.navigate(name, params);
  }
}

navigator:


const Home = createStackNavigator();

export default function HomeNavigator(): JSX.Element {
  return (
    <Home.Navigator
      initialRouteName={HOME_SCREEN}
      screenOptions={{ headerShown: false }}
    >
      <Home.Screen name={HOME_SCREEN} component={HomeScreen} />
      <Home.Screen name={TEST_SCREEN} component={TestScreen} />
    </Home.Navigator>
  );
}

routes:

export const HOME_SCREEN = 'Home';
export const TEST_SCREEN = 'Test';