Issues with conditional rendering react

So I have read quite a lot about react conditional rendering on the official docs and on STO as well but I have some issues and doubts.

     return (
        
        <div className="container is-fluid">
          {games.map((game) => (
            
           <div className="gameContainer" key={game.id}>
             
    
        {!!`${game.live_embed_url}` && (<iframe src= {`${game.live_embed_url}&parent=localhost`} frameBorder="2" allowFullscreen="true" scrolling="no" height="378" width="620">
</iframe>)}
    
    
            <h2 className="h2__whiteuk-text-large">{game.name}{game.live_embed_url}</h2>
            </div>
          ))}
        </div>
      );

My objective here is I’m trying to check if the value of {game.embed_url} is NULL then no <iframe> should be rendered, else <iframe> should be rendered,

Ofc all this would be much simpler with a if/else but since I’m inside the return I cannot use that and I’m not sure how to proceed with this.

I’m sorry if the question is too basic but I have spent too much time trying to figure it out and just keep breaking my application.

How to display list tag inline when there’s divs and images inside?

ul li{
  display: inline;
}
<ul>
  <li>
    <div>
       <p>This is some text in list 1 and is in a div tag</p>
    </div>
  </li>
   
  <li class="li_2">
    <div>
       <p>This is some text in list 2 class and is in a div tag</p>
    </div>
  </li>
</ul>

How can I make it so that the list is displayed inline? It doesn’t because I thing it’s because there is div tags, but I’m not sure. I want them to be next to each other.

Puppeteer select element id where beginning and end are dynamically generated

I’m trying to use puppeteer to select a dynamic element id. I’ve found how to select and element using just the beginning or just the end, but what I’m currently trying to do is find the element by the static part of the id in the center.

await page.waitForSelector('[id^="holder"][id$="_private_1"]');

In the above code snippet the original id looks like holder123456_private_1. I’ve gotten that part fine. However, the end of “_private_1” the number may change. So essentially I need the same code above but leave off the number at the end.

How to detect if request body was sent or not?

I’m working with express + json body parser. For validation purposes I need to distinguish between

  • empty object request body was sent by the user ({})
  • no request body was sent by the user

as I’m trying to provide reasonable error messages, and in one case I need to instruct the user to add missing fields, while in the other case they might not even be aware that the request body should be sent, and the priority is warning them about this.

This to me seems impossible currently, as the json body parser sets request.body to {} in case no request body was provided, reference:

https://github.com/expressjs/body-parser/blob/master/lib/types/json.js#L72

My question is, using the json body parser, is it possible to detect if the request body was actually sent by the client or not? So how would I implement a function like this:

import { Request } from 'express'

function didTheUserSendRequestBody(request: Request): boolean {
  // What do?
}

Which returns true when my endpoint is hit like this:

curl -X POST http://localhost:5000/foo 
   -H "Content-Type: application/json"
   -d '{}'  

And false for this:

curl -X POST http://localhost:5000/foo 

How to access a JS variable from separate display_javascript calls in Deepnote?

This simple code in a single cell works in Jupyter Notebook, but Deepnote seems to render the display_javascript calls into separate iframes. Is there any way to get this work in Deepnote?

from IPython.display import display_javascript

display_javascript("var a = 10", raw=True)
display_javascript("console.log(a)", raw=True)

Uncaught (in promise) ReferenceError: a is not defined

Source:
https://deepnote.com/project/How-to-access-Javascript-variable-from-separate-displayjavascript-call-hvyWPhDWRGahj9NvgJtuGw/%2Fnotebook.ipynb

Background: I’m working on a JS charting library Jupyter integration (ipyvizzu), where I would like to access the JS chart object eventually from different cells in the notebook.

How can I return a React Component from a function and render it onClick?

I have an array of objects that I am looping through in my higher order component. On click I want to pass one of those objects to my component and render that component. The problem I am having is it’s unclear how to return the component and have React update the render to show that component. I’ve read several Stackoverflow posts on this and the problem of putting the component in the html is it passes all the items in my loop to my component instead of just the one I need onClick.

The warning I’m seeing in my console is react_devtools_backend.js:3973 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> Which makes sense however, I’m not sure what the proper syntax is to solve this problem. Below is the relevant code.

const FormGroup = ({index}) => {

  const renderSection = form => ( // I want to render this
    <AdditiveSection
      form={form}
      register={register}
      errors={errors}
    />
  );

   const addSection = form => {
     setAdditionalSection(prevState => !prevState);
     console.log('form', form);
     renderSection(form);
   };

  return (
    <section>
      <FormProvider {...methods}>
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        {myForm.controls.map(form => {
          if (form.type === 'section') {
            return (
              <FormSection>
                <div className="section__label">
                  <h4>{form.label}</h4>
                </div>

                ...

                {form.button
                && (
                <FormAdd>
                  <LinkButton
                    type="button"
                    onClick={() => addSection(form)} // called here and passes my form object
                >
                  <span className="button--small">{form.button}</span>
                  </LinkButton>
                </FormAdd>
                )}

                {renderFormType(form)}
              </FormSection>
            );
          }

        })}

        // renderSection should render here outside of the loop
        {additionalSection && renderSection}


        <input type="submit" />
      </form>
    </FormProvider>
  </section>
);

Angular drop-down only shows not selected options

I need my p-dropdown to show only the options that are not precisely selected

for example if I have A and I want to choose something else only B and C appear, if I have B only A and C appear

ts
this.planOptions = [
        { name: '1'},
        { name: '2'},
          ]; 

       

html
 <p-dropdown [style]="{'minWidth':'100%', 'width': '100px', 'height':'50px'}" id="plan_option" appendTo="body" [options]="planOptions" [(ngModel)]="selectedPlanOption" placeholder=" "  optionLabel="name"></p-dropdown>       

I need help finding out how to put a space between rows of a table in HTML

I have a table with many rows, and I just need to find a way to put a line of space in between each row.

  Example: a b c
 
           d e f

I’m still very new to HTML/CSS/JS, so I was hoping I could get a pretty simple explanation, as I’ve seen the question asked here but I was still unsure of how to replicate it. Here are my tables in HTML, and the code I used in JS. Here's my table with some JS code. Here's my table in HTML. If anyone could help me out with this, I’d really appreciate it!

I’ve tried to make a class for <tr> and using border-collapse, but to no avail, as I may have done something wrong. I’ve also tried messing around in the JS code, but I’m not sure if I should add the spaces in between from there or through the HTML.

Display info after page reload triggered on button click

I have webstore, when a user adds something to the cart page is quickly refreshed indicating that something has happened and you can see updated cart value at the top of the page. I was made aware that this isn’t enough for users and I should display some sort of message about.

This is where I’m handling all the logic like updating the backend and creating cookies for anonymous user

<button  type="button" data-product="{{ product.id }}" data-stock="{{ product.stock }}" data-action="add"  class="buttonDetail update-cart">
    <i class="fas fa-cart-plus" ></i> ADD to cart
</button>

var updateBtn = document.getElementsByClassName("update-cart");
for (i = 0; i < updateBtn.length; i++)
    updateBtn[i].addEventListener("click", function () {
        var t = this.dataset.product,
            e = this.dataset.action,
            a = this.dataset.stock;
        "AnonymousUser" === user ? addCookieItem(t, e, a) : updateUserOrder(t, e);
    });
function addCookieItem(t, e, a) {
        "add" == e && (void 0 === cart[t] ? (cart[t] = { quantity: 1 }) : cart[t].quantity < Number(a) && (cart[t].quantity += 1)),
        "remove" == e && ((cart[t].quantity -= 1), cart[t].quantity <= 0 && delete cart[t]),
        "delete" == e && delete cart[t],
        (document.cookie = "cart=" + JSON.stringify(cart) + ";domain=;path=/"),
        history.go(0);
}
function updateUserOrder(t, e) {
    fetch("/updateItem", { method: "POST", headers: { "Content-Type": "application/json", "X-CSRFToken": csrftoken }, body: JSON.stringify({ productId: t, action: e }) })
        .then((t) => t.json())
        .then((t) => {
            console.log(t), history.go(0);
        });
}

how can I show some quick message about adding to the cart. I can display some div before history.go(0) but that looks tacky and I don’t wanna rewrite this to AJAX

i need some assistance with this guys

i’ve been trying to make something with bookmarklets and I’m getting a bit frustrated. i’ve googled it a thousand times but i don’t get anything that works. i’m trying to get my prompt to reply with something if given a certain message.
example: if i say “hello” i’d like it to say “hello” back to me, but if i say “goodbye” instead of “hello”, i want it to say “goodbye” back to me. is there anyway to do this or am i just stupid.
thanks guys!

-Cayde

everything, i expected great success, and got epic failure

radio condition to show the next step

Hello I am new to programing I am creating this small page. I need to add conditions on the radios. when a user choose option form the list for example if do they want to add their name if they choose yes specific step will be shown if now they will shown different step.

<!DOCTYPE html>

<html lang="en" dir="ltr">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="description" content="">

<meta name="author" content="">

<title>Makassed Communication Portal</title>

<!-- CSS -->

<link href="assets/css/bootstrap.min.css" rel="stylesheet">

<link href="assets/css/style.css" rel="stylesheet">



<!-- FONT -->

<link href="https://fonts.gstatic.com" rel="preconnect">

<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600&display=swap" rel="stylesheet">

</head>

<body>

<div class="container d-flex align-items-center min-vh-100"><!-- CONTAINER  Starts-->

<div class="row g-0 justify-content-center"><!--- row g-0 justify-content-center Starts-->

<div class="col-lg-4 offset-lg-1 mx-0 px-0"><!-- TITLE Starts -->

<div id="title-container"><!-- title-container Starts-->

<img class="covid-image" src="images/covid-check.png">

<p class="text-justify">Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati molestiae voluptate atque, saepe maxime dolore cumque quidem veniam accusamus nulla commodi aut corporis, totam est molestias sed ea facere. Et?</p>

</div><!-- title-container Ends-->

</div><!-- TITLE Ends -->

<div class="col-lg-7 mx-0 px-0"><!-- FORMS Starts -->

<div class="progress"><!--progress Starts-->

<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 0%"></div>

</div>

<div id="qbox-container">

<form class="needs-validation" id="form-wrapper" method="post" action="action.php" name="form-wrapper" novalidate>

<div id="steps-container">

    
<fieldset>

<div class="step" id="lang">

<h4>Please Choose Lanuguage | رجاء اختيار اللغة </h4>

<div class="form-check ps-0 q-box">

<div class="q-box__question">

<input checked class="form-check-input question__input" id="q_1_yes" name="q_1" type="radio" value="Yes"> 

<label class="form-check-label question__label" for="q_1_yes">Englsih</label>

</div>

<div class="q-box__question">

<input checked class="form-check-input question__input" id="q_1_no" name="q_1" type="radio" value="No"> 

<label class="form-check-label question__label" for="q_1_no">Arabic</label>

</div>

</div>

</div>

</fieldset>












<fieldset>

<div class="step" id="mnames">

<h4>Do You want to mention Your Name</h4>

<div class="form-check ps-0 q-box">

<div class="row">

<div class="col">

<div class="q-box__question">

<input class="form-check-input question__input" id="q_2_yes" name="q_2" type="radio" value="Yes"> 

<label class="form-check-label question__label" for="q_2_yes">Yes</label>

</div>

</div>


<div class="col">

<div class="q-box__question">

<input checked class="form-check-input question__input" id="q_2_no" name="q_2" type="radio" value="No"> 

<label class="form-check-label question__label" for="q_2_no">No</label>

</div>

</div>



</div>

</div>

</div>

</fieldset>



<fieldset>

<div class="step" id="empname">

<h4>Please Write Your Name and Employee #</h4>

<div class="form-check ps-0 q-box">

<div class="q-box__question">


<div class="row">

<div class="col">

<label for="inputEmail4">Employee Name</label>

<input type="name" class="form-control"  placeholder="Employee Name">

</div>

<div class="col">


<label for="inputPassword4"> Employee Number # </label>

<input type="text" class="form-control"  placeholder="Employee Number #">

</div>

</div>

</div>

</div>

</div>


</fieldset>



<fieldset>

<div class="step">

<h4>Please Select one of the folowing options</h4>

<div class="row">

<div class="col-lg-12">

<div class="form-check ps-0 q-box">

<div class="q-box__question">

<input class="form-check-input question__input q-checkbox" id="q_4_right" name="q_4" type="radio" value="uk"> 

<label class="form-check-label question__label" for="q_4_right">

Doing the right thing ! <br>

<p class="lead">Reaporting someting you see wrong</p>

</label>

</div>

</div>



<div class="form-check ps-0 q-box">

<div class="q-box__question">

<input class="form-check-input question__input q-checkbox" id="q_4_ideas" name="q_4" type="radio" value="j"> 

<label class="form-check-label question__label" for="q_4_ideas">Share your Ideas <br>

<p class="lead">Let us know if you have a great suggestion</p></label>

</div>

</div>

<div class="form-check ps-0 q-box">

<div class="q-box__question">

<input class="form-check-input question__input" id="q_4_views" name="q_4" type="radio" value="us">

<label class="form-check-label question__label" for="q_4_views">Air your Views <br>

<p class="lead"> Tell us what's frusting you in the work place</p></label>

</div>

</div>

</div>

</div>

</div>






<div class="step">

<h4>Donig the right thing</h4>

<p>Reporting someting you see wrong

if you see or suspect someone or something being done wrong that is having a negative impact or harming the association please share your concern</p>

<div class="row">

<div class="form-check ps-0 q-box">

<div class="q-box__question">

<label for="floatingTextarea2">Comments</label>
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>

                      </div>

                    </div>

                  </div>

                </div>

              </fieldset>

              <div class="step d-none">

                <h4>Incident Reported on:</h4>

                <div class="row">

                  <div class="col">

                    <label class="form-label">REPORTED PERSON</label>

                    <input type="text" class="form-control" placeholder="Reported Person">

                  </div>

                  <div class="col">

                    <label class="form-label">REPORTED EMPLOYEE #</label>

                    <input type="text" class="form-control" placeholder="Reported Employee #">

                  </div>

                </div>

                <div class="mt-2">

                  <label class="form-label">INCIDENT TYPE </label>

                  <select class="form-select" aria-label="Default select example">

                    <option selected>Select Incident Type</option>

                    <option value="1">THEFT</option>

                    <option value="2">NON COMPLIANCE WITH COMPANY POLICY</option>

                    <option value="3">FRAUD</option>

                    <option value="3">ABUSING POWER</option>

                    <option value="3">USING COMPANY PROPERTY FOR PERSONAL INTEREST</option>

                    <option value="3">NEGLIGENCE</option>

                  </select>

                </div>




                <div class="mt-2">

                  <label for="exampleFormControlTextarea1">INCIDENT DETAILS </label>

                  <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>

                </div>



                <div class="mt-2">

                  <label class="form-label">INCIDENT CITY</label>

                  <select class="form-select" aria-label="Default select example">

                    <option selected>Select Incident City</option>

                    <option value="1">Beirut</option>

                    <option value="2">Bekaa</option>

                  </select>

                </div>


                <div class="mt-2">

                  <div class="row">

                    <div class="col">

                      <label for="formFileMultiple" class="form-label">UPLOAD ATTACHEMENT </label>

                      <input class="form-control" type="file" id="formFileMultiple" multiple />

                    </div>


                    <div class="col">

                      <label for="" class="form-label">INCIDENT DATE</label>

                    </div>


                  </div>

                  <div class="mt-4">

                    <div class="form-check form-switch">

                      <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">

                      <label class="form-check-label" for="flexSwitchCheckDefault">I confirm that, all above provided information is correct.</label>

                    </div>

                  </div>

                </div>

              </div>

              <div class="step d-none">

                <div class="mt-1">

                  <div class="closing-text">

                    <h4>Thank you</h4>

                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut omnis explicabo doloribus at iste magni maiores impedit, nam eum reprehenderit facere aliquid ipsa labore sed? Dolorem eveniet recusandae molestiae at.</p>

                    <p>Click on the submit button to continue.</p>

                  </div>

                </div>

              </div>

              <div id="success">

                <div class="mt-5">

                  <h4>Success! We'll get back to you ASAP!</h4>

                  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Pariatur deleniti eius ab totam quaerat illo perferendis, eum veritatis rerum tempore impedit. Saepe dolores eligendi eum culpa beatae, id doloribus ipsum.</p>
                  <a class="back-link" href="">Go back from the beginning ➜</a>

                </div>

              </div>

            </div>

            <div id="q-box__buttons">

              <button id="prev-btn" type="button">Previous</button>

              <button id="next-btn" type="button">Next</button>

              <button id="submit-btn" type="submit">Submit</button>

            </div>

          </form>

        </div>
        <!--progress Starts-->

      </div><!-- FORMS Ends -->

    </div>
    <!--- row g-0 justify-content-center Ends-->

  </div><!-- CONTAINER ends -->

  <div id="preloader-wrapper">
    <!-- preloader-wrapper Starts-->

    <div id="preloader"></div>

    <div class="preloader-section section-left"></div>

    <div class="preloader-section section-right"></div>

  </div><!-- preloader-wrapper Starts-->


  <script src="js/script.js"></script>


  <script>



if(document.getElementById('q_1_yes').checked) {




}


else if(document.getElementById('q_1_no').checked) {

}


  </script>



</body>

</html>

javascript

let step = document.getElementsByClassName('step');
let prevBtn = document.getElementById('prev-btn');
let nextBtn = document.getElementById('next-btn');
let submitBtn = document.getElementById('submit-btn');
let form = document.getElementsByTagName('form')[0];
let preloader = document.getElementById('preloader-wrapper');
let bodyElement = document.querySelector('body');
let succcessDiv = document.getElementById('success');

form.onsubmit = () => {
  return false
}

let current_step = 0;
let stepCount = 8

step[current_step].classList.add('d-block');

if (current_step == 0) {
  prevBtn.classList.add('d-none');
  submitBtn.classList.add('d-none');
  nextBtn.classList.add('d-inline-block');
}

const progress = (value) => {

  document.getElementsByClassName('progress-bar')[0].style.width = `${value}%`;

}

nextBtn.addEventListener('click', () => {

  current_step++;

  let previous_step = current_step - 1;

  if ((current_step > 0) && (current_step <= stepCount)) {

    prevBtn.classList.remove('d-none');
    prevBtn.classList.add('d-inline-block');
    step[current_step].classList.remove('d-none');
    step[current_step].classList.add('d-block');
    step[previous_step].classList.remove('d-block');
    step[previous_step].classList.add('d-none');

    if (current_step == stepCount) {
      submitBtn.classList.remove('d-none');
      submitBtn.classList.add('d-inline-block');
      nextBtn.classList.remove('d-inline-block');
      nextBtn.classList.add('d-none');
    }
  } else {
    if (current_step > stepCount) {
      form.onsubmit = () => {
        return true
      }
    }
  }
  progress((100 / stepCount) * current_step);
});


prevBtn.addEventListener('click', () => {
  if (current_step > 0) {
    current_step--;
    let previous_step = current_step + 1;
    prevBtn.classList.add('d-none');
    prevBtn.classList.add('d-inline-block');
    step[current_step].classList.remove('d-none');
    step[current_step].classList.add('d-block')
    step[previous_step].classList.remove('d-block');
    step[previous_step].classList.add('d-none');

    if (current_step < stepCount) {
      submitBtn.classList.remove('d-inline-block');
      submitBtn.classList.add('d-none');
      nextBtn.classList.remove('d-none');
      nextBtn.classList.add('d-inline-block');
      prevBtn.classList.remove('d-none');
      prevBtn.classList.add('d-inline-block');
    }
  }

  if (current_step == 0) {
    prevBtn.classList.remove('d-inline-block');
    prevBtn.classList.add('d-none');
  }
  progress((100 / stepCount) * current_step);
});


submitBtn.addEventListener('click', () => {
  preloader.classList.add('d-block');
  const timer = ms => new Promise(res => setTimeout(res, ms));
  timer(5)
    .then(() => {
      bodyElement.classList.add('loaded');
    }).then(() => {
      step[stepCount].classList.remove('d-block');
      step[stepCount].classList.add('d-none');
      prevBtn.classList.remove('d-inline-block');
      prevBtn.classList.add('d-none');
      submitBtn.classList.remove('d-inline-block');
      submitBtn.classList.add('d-none');
      succcessDiv.classList.remove('d-none');
      succcessDiv.classList.add('d-block');
    })

   

  
});

I tried to add the below code but did now work

if(document.getElementById('q_1_yes').checked) {

  $("#mnames").removeClass('d-none');

  


}


else if(document.getElementById('q_1_no').checked) {

  $("#mnames").addClass('d-none');

}

Django react router dom don’t render pages

my page don’t render the HomePage
but if i only use

h1 Test HomePage h1

in render it work.

i wanna know where i should fix it or what im doing wrong
thanks for help

or you need to see the other file you can tell me

im kinda new to the programming

import React, { Component } from "react";
import { render } from "react-dom";
import HomePage from "./HomePage";
import RoomJoinPage from "./RoomJoinPage";
import CreateRoomPage from "./CreateRoomPage";
export default class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <HomePage/>
      </div>

    );

  }
}

const appDiv = document.getElementById("app");
render(<App />, appDiv);

this is my HomePage Code

import React, { Component } from "react";
import RoomJoinPage from "./RoomJoinPage";
import CreateRoomPage from "./CreateRoomPage";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  Redirect,
} from "react-router-dom";

export default class HomePage extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/">
            <p>This is the home page</p>
          </Route>
          <Route path="/join" component={RoomJoinPage} />
          <Route path="/create" component={CreateRoomPage} />
        </Switch>
      </Router>
    );
  }
}

how do I make a math Django and react web application?

Hope all is well.

I want to have an input field in my react frontend that takes in a math expression (e.g 1 + 1) and I want my backend to respond with the answer 2.

How do you do this using reactjs and Django?

So far I have some of the frontend finished:

it will send the input data to the backend using the API url.

import  React, {useState, UseEffect } from 'react';

function Home() {
    const [query, setQuery] = useState("");

    return (
        <div className='Home'>
            <form action={APIL_URL} method="POST">
                <input name="linear-algebra-expression"
                       id="linear-algebra-expression"
                       type="text"
                       onChange={e => setQuery(e.target.value)}
                       value={query}>
                </input>
            </form>
        </div>
    )
}

export default Home;

I am aware that in my Django backend I am going to have something like:

class LinearAlgebraView(APIView):
    def post(self, request):
        expression = request.POST['linear-algebra-expression']

        return (... ?)

I want to be able to return the computed data from Django to react at the samne web page where the user entered the math expression in the form/input. How do I do this?

Thanks

how do i click on div that dose not have button in js

<div class="face"></div>
<div class="back"></div>
<div class="face"></div>
<div class="back"></div>
<div class="face"></div>
<div class="back"></div>
<div class="face"></div>
<div class="back"></div>
<div class="face"></div>
<div class="back"></div>
<div class="face"></div>
<div class="back"></div>
<div class="face"></div>
<div class="back"></div>
<div class="face"></div>
<div class="back"></div>
<div class="face"></div>
<div class="back"></div>
<div class="face"></div>
<div class="back"></div>
<div class="face"></div>
<div class="back"></div>
<div class="face"></div>
<div class="back"></div>
<div class="face"></div>
<div class="back"></div>

document.querySelector(‘.card.face-up.spade-4.ui-draggable.selectedcard’).click();
document.querySelector(‘.card.face-up.spade-4.ui-draggable’).click();

when mouse over element class change to

how do i click on it

Photoshop scripting (.jsx): push string into an Array only if it doesn’t exist there yet

I have a unique signature being generated for each iteration, which I want to eventually save on a .txt file.

My signature is quite simple, using 0-9 and A-Z, being 14 chars long.

I want to push it to an Array only if that Array doesn’t contain it yet. Here is what I tried to do:

var uniqueSignature = []

do {
    var uniqueSignature = generateSignature()
    if (!signatureArray.includes(uniqueSignature)){ //checks if the Array does not contain the signature.
        signatureArray.push(uniqueSignature) //pushes the signature into the array.
    }
} while (!signatureArray.includes(uniqueSignature)) //Keep doing so until the signature can be inserted (meaning is unique)

function generateSignature(){
    var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"
    var signatureLength = 14
    var genSignature = ""
    for (var i = 0; i <= signatureLength; i++) {
        var randomChars = Math.floor(Math.random() * chars.length)
        genSignature += chars.substring(randomChars, randomChars +1)
    }
    return genSignature
}

//[... eventually will write the array to a .txt files]

When I try to run it on Adobe Photoshop > Browse > Load script, I get this error:
enter image description here

I’ve also tried to replace .includes for .indexOf, pushing it only if signatureArray.indexOf(uniqueSignature) == -1, but got the same error.

Any ideas? I know that jsx/Photoshop has some limitations when it comes to code (like it won’t let me use ${var} and such). Is that the thing here?

If so, is there any other way for me to achieve this push after verification?