http request does not get called when uploading the data to Firebase – firebase cloud function

Hello everyone I am trying to fetch the data from Binance than do a schedule function that uploads the data from the previous fetch to the Cloud FireStore , the schedule function is a function that gets called every minute and MUST call the fetch function update the object that contain the data and than I parse that object in order to upload the updated data.

The problem is that the function that fetches the data gets called just one time and that is it, the next minute after the function deploy the fetch data gets not called and I tried everything I found on stackoverflow and google but not luck.

Can anyone give me a hint thank you.

Code:

"use strict";
Object.defineProperty(exports, "__esModule", {value: true});
const functions = require("firebase-functions");
const admin = require("firebase-admin");
admin.initializeApp();
const database = admin.firestore();
const https = require("https");
let finalData = [];
const page = 1;
const fiat = "RON";
const tradeType = "SELL";
const asset = "USDT";
const payTypes = ["BCRBank"];
const baseObj = {
  page,
  rows: 20,
  publisherType: null,
  asset,
  tradeType,
  fiat,
  payTypes,
};
const stringData = JSON.stringify(baseObj);
const options = {
  hostname: "p2p.binance.com",
  port: 443,
  path: "/bapi/c2c/v2/friendly/c2c/adv/search",
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Content-Length": stringData.length,
  },
};

const req = https.request(options, (res) => {
  console.log("I did not enter here!!!!!!!");
  finalData = [];
  let output = "";
  res.on("data", (d) => {
    output += d;
  });
  res.on("end", () => {
    try {
      const jsonOuput = JSON.parse(output);
      const allData = jsonOuput["data"];
      for (let i = 0; i < allData.length; i++) {
        let payTypesz = "";
        for (let y = 0; y < allData[i]["adv"]["tradeMethods"].length; y++) {
          payTypesz += allData[i]["adv"]["tradeMethods"][y]["payType"];
          if (y < allData[i]["adv"]["tradeMethods"].length - 1) {
            payTypesz += ", ";
          }
        }
        const obj = {
          tradeType: allData[i]["adv"]["tradeType"],
          asset: allData[i]["adv"]["asset"],
          fiatUnit: allData[i]["adv"]["fiatUnit"],
          price: allData[i]["adv"]["price"],
          surplusAmount: allData[i]["adv"]["surplusAmount"],
          maxSingleTransAmount: allData[i]["adv"]["maxSingleTransAmount"],
          minSingleTransAmount: allData[i]["adv"]["minSingleTransAmount"],
          nickName: allData[i]["advertiser"]["nickName"],
          monthOrderCount: allData[i]["advertiser"]["monthOrderCount"],
          monthFinishRate: allData[i]["advertiser"]["monthFinishRate"],
          advConfirmTime: allData[i]["advertiser"]["advConfirmTime"],
          payTypes: payTypesz,
          position: 0,
        };
        finalData.push(obj);
      }
      console.log("DATAAAAAAAA"+finalData[0]["price"]);
      console.log(finalData);
    } catch (e) {
      console.log(e);
    }
  });
});

exports.scheduledFunctionBCRBankSELL = functions.pubsub
    .schedule("* * * * *")
    .onRun(async (context) => {
      req.write(stringData);
      for (let i = 0; i < finalData.length; i++) {
        await database.collection("SebiBinanceSale").doc("BCR Bank")
            .collection("1").doc(i.toString())
            .set({
              "tradeType": finalData[i]["tradeType"],
              "asset": finalData[i]["asset"],
              "fiatUnit": finalData[i]["fiatUnit"],
              "price": finalData[i]["price"],
              "surplusAmount": finalData[i]["surplusAmount"],
              "maxSingleTransAmount": finalData[i]["maxSingleTransAmount"],
              "minSingleTransAmount": finalData[i]["minSingleTransAmount"],
              "nickName": finalData[i]["nickName"],
              "monthOrderCount": finalData[i]["monthOrderCount"],
              "monthFinishRate": finalData[i]["monthFinishRate"],
              "advConfirmTime": finalData[i]["advConfirmTime"],
              "payTypes": finalData[i]["payTypes"],
              "position": finalData[i]["position"],
            });
      }
      req.end();
      return console.log("Succes Upload of the data ");
    });

Is it possible to use local storage to save navigation-drawer visibility?

I have a navigation-drawer

<v-navigation-drawer ...content... </v-navigation-drawer>

And a menu button, which hides/shows the navigation drawer.

<v-btn @click.stop="drawer = !drawer"> Menu </v-btn>

If I refresh / change page, I need to click the button to show/hide the navigation-drawer again. Is it possible to use local storage …

https://v2.vuejs.org/v2/cookbook/client-side-storage.html

…to ‘save’ whether the navigation-drawer is hidden/visble?

I have checked the documentation / googled, but can not find out how to do this.

Find Documents with the given array of keys

Here is an array,

[
     { "cid": 1, 
       "sub_cids": [15,22,16]
     }, 
     {
       "cid": 3
     },
     {  
       "cid": 97, 
       "sub_cids": [125] 
     }
]

Each document contains cid and subcid fields of type int. For each cid,an array of subcid is given. How can I find documents with the given cid and subcid array? For example, query should return all documents with { cid=1,subcid = 15}, { cid=1,subcid = 22} and { cid=3,subcid = 16}

How does retrieving content from client-side headless CMS API impact web crawlers and SEO

This is something I’ve been struggling to wrap my head around for the past few days. Tried to keep the rambling to a minimum but concise questions are at the bottom.

As I understand it, utilizing JS to display content isn’t great for SEO – the HTML isn’t fully rendered on initialization, which causes problems for web crawlers. This problem is amplified when using frameworks like angular, as the entire application structure is dependent on JS logic triggered client side. I often see SSR used as a solution through tech like Prerender or Angular Universal.

Given the above, I’d expect similar issues on a website/app managing content in a headless CMS like Strapi, getting that content through an API call on the FE/client side of the application, and rendering that content in the view on completion of the call.

I expected this to be a common issue, but haven’t found much when googling. All of the resources I’ve pulled up talk about how great headless CMS is for SEO, how to manage metadata with the CMS, managing URL slugs, etc…

My Questions

1 – For a website with the following architecture Headless CMS <–API–> FE, rendering content dynamically (whatever content is returned from CMS), would there be issues with SEO – specifically issues with search engine web crawlers finding the content?

2 – Assuming the above isn’t an issue – are the web crawlers waiting on the site to initialize, API calls to resolve, content to render, etc?

3 – Again assuming the above is valid – why would JS frameworks like angular considered bad practice for SEO.

Programatic content script injection returning same string after url change

Goal: Re-inject content script after a URL change and grab new name from the DOM

Problem: The same name returns after URL change. The idea is a new URL signifies a new name in the DOM that I would like to populate within my popup.html.

background.js

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
    if (changeInfo.url) {
        chrome.scripting.executeScript({
            target: { tabId: tab.id },
            files: ['contentScript.js']
        });
    }
});

contentScript.js – Should run after URL change

let name;

setTimeout(() => {
  const recordNameEl = document.querySelectorAll('.recordId');
  const recordNameString = recordNameEl[1].textContent;
  const nameArray = recordNameString.split(' ');
  name = nameArray[0];

  // Set name in localStorage. Should reset to new name after URL change
  chrome.storage.local.set({ name });

  // Logs same name 
  console.log(name);
}, 10000);

Surely a new context is created after each script execution?

In case your wondering

  • I’m using settimeout() because the page takes so long to load. If I didn’t then I’d get a reference error

Bootstrap 5 dropdown without bootstrap js

in my Angular app I have a header with icons/pics which I want to use as dropdowns. Code snippet looks as follows:

      <li class="nav-item dropdown">
          <a
            class="nav-link dropdown-toggle"
            href="#"
            id="navbarDropdownMenuLink"
            role="button"
            data-bs-toggle="dropdown"
            aria-expanded="false"
          >
            <img
              src="../../assets/images/icon_user_menu.png"
              width="18px"
              height="18px"
            />
            Username
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>

So… for a burger-menu I know (and I do) just add a typescript-method in the component.ts which changes the “open-class”.
But I really didn’t find anything related to the dropdown stuff from bootstrap 5.

Is there a way to just apply a similar solution too? Maybe I over read sth. somewhere but I really cant find a solution for this to work.

Thanks in advance anyone!

Local Storage for more websites [closed]

On my website I have created a comment system that relies on local storage to be able to review old comments when you refresh the page. But I have another page that have the same system and they share the local storage so I can see comments from page 1 on page 2.

Javascript File

const CommentAdd = document.getElementById("AddComment");
let date = new Date();
let year = date.getFullYear();
let day = date.getDate();
let month = date.getMonth();


for (let i = 0; i < localStorage.length; i++){
  const key = localStorage.key(i);
  const value = localStorage.getItem(key);
  const newDiv = document.createElement("div");

  console.log("add");

  newDiv.classList.add("div-shadow");
  commentContainer.appendChild(newDiv);
  var name = document.getElementById("Name").value;
  var comment = document.getElementById("Comment").value;
  newDiv.textContent = value;
}


CommentAdd.addEventListener("click", AddNew);

function AddNew() {
  if (document.getElementById("Name").value == "" ||document.getElementById("Comment").value == ""){
    return;
  } else{

  const newDiv = document.createElement("div");
  console.log("add");
  newDiv.classList.add("div-shadow");
  commentContainer.appendChild(newDiv);

  var name = document.getElementById("Name").value;
  var comment = document.getElementById("Comment").value; 
  var printedDate = day + "/" + month + "/" + year;
  newDiv.textContent = name + ": n" + comment + "n" + printedDate;

  var nameCleaner = document.getElementById("Name");
  nameCleaner.value ="";
  var Commentcleaner = document.getElementById("Comment");
  Commentcleaner.value ="";

  localStorage.setItem(name + " said at " + date, name + ":n" + comment + " n" + printedDate)
  }
} 

HTML

    <h4>Comments</h4>  
    <input type="text" id="Name" placeholder="Name">
    <br><br>
    <textarea id="Comment" rows="5" placeholder="Comment"></textarea>
    <br>
    <button type="submit" id="AddComment" >Add Comment</button>
    </center>
    <div id="comment-container"></div>
    <br><br>
    </section> ```

Prevent CKEditor 4.18 from escaping html tags

I have a problem with CKEditor replacing <>” as &lt; &gt; &quot; respectively when saving contents to database. I would prefer to save the actual html tags in the database instead.
I’ve tried setting all of the options I could find without any success:

config.entities = false;
config.entities_greek = false;
config.entities_latin = false;
config.htmlEncodeOutput = false;
config.entities_processNumerical = false;

(Btw, setting config.entities = true; encodes the whitespace as &amp;nbsp; which is definitely a bug)

So, I figured out I have to deal with dataProcessor.htmlFilter and came up with the following code:

CKEDITOR.on('instanceReady', function(ev) {
    ev.editor.dataProcessor.htmlFilter.addRules({
        text: function(text) {
            return text.replace(/&gt;/, '>').replace(/&lt;/, '<').replace(/&quot;/, '"');
        }
    });
});

which doesn’t help either, because text contains the simple text stripped off of all html tags. I was trying to find what other options than text I can pass to addRules() but couldn’t find any information on this in the CKEditor documentation.

JavaScript: calculate crazy decimal number returned from subtraction of two decimal numbers [duplicate]

I am making a service price tracker bot which will show something like this on price decrease:

Service price decreased from 0.10 to 0.05

If you buy right now, you could save <x>

<x> is the substracted amount or safe amount (oldPrice – newPrice).

Code for subtraction:

oldPrice - newPrice
0.10 - 0.05
// -> 0.05

While this works completely fine, but in some cases, if the service price (new or old) is like in more than 3 decimals e.g. 0.2184

The code will return weird full long number.

Examples:

0.2184 - 0.1404
// -> 0.07800000000000001
0.09 - 0.085
// -> 0.0049999999999999906
2.159 - 2.0088
// -> 0.1501999999999999

/* Rare cases */
0.1764 - 0.1134
// -> 0.063
5.675 - 2.275
// -> 3.4
5.175 - 1.775
// -> 3.4

I obviously tried things like Math.abs() and use String.replace() to remove 00 and 99, but nothing really works.

e.g.

2.159 - 2.0088
// -> 0.1501999999999999

String(2.159 - 2.0088).replace(/[09][09]+/g, "");
// -> "0.1501"

0.2184 - 0.1404
// -> 0.07800000000000001

String(0.2184 - 0.1404).replace(/[09][09]+/g, "");
// -> "0.0781"
// -> Right: "0.780"
// -> Mistakes: 0.0 and 781 instead of 780

Note: I don’t really care if the result is in string.

As you already saw above, it calculates wrong or essentially removes the main 9s or 0s.

Is there any other approach or it’s the best one?

Dynamic JSON Table Sorting With Select Box – Sorting By JSON ID but it’s just loading everything, everytime

I’ve got a select box listing the provinces and have assigned them each an ID correlating to the JSON file, and on click, I want to bring up the data with each province, but it’s bringing up everything. Here is what I have.

This is my JSON:

{
    "data": [{
        "province": "ON",
        "date": "2022-04-12",
        "change_cases": 2300,
        "change_fatalities": 4,
        "change_tests": 14183
    }, {
        "province": "QC",
        "date": "2022-04-12",
        "change_cases": 2596,
        "change_fatalities": 35,
        "change_tests": 0
    }]
}

This is my select box

<select id="myselect" onchange="change_myselect(this.value)">
    <option>Select a Province</option>
<option value="0">Ontario</option>
<option value="1">Quebec</option>
<option value="2">Nova Scotia</option>
<option value="3">New Brunswick</option>
<option value="4">Manitoba</option>
<option value="5">British Columbia</option>
<option value="6">Prince Edward Island</option>
<option value="7">Saskatchewan</option>
<option value="8">Alberta</option>
<option value="9">Newfoundland</option>
<option value="10">Northwest Territories</option>
<option value="11">Yukon</option>
<option value="12">Nunavut</option>
</select>

and my Javascript

<script>
function change_myselect(sel) {
  var obj, dbParam, xmlhttp, myObj, x, txt = "";
  obj = { table: sel, limit: 20 };
  dbParam = JSON.stringify(obj);
  xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myObj = JSON.parse(this.responseText);
      txt += "<table border='1'>"
     for (x in myObj.data) {
    txt += "<tr><td>" + myObj.data[x].province + "</td></tr>";
  }
      txt += "</table>"    
      document.getElementById("demo").innerHTML = txt;
      }
    };
  xmlhttp.open("POST", "provdata.php", true);
  xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xmlhttp.send("x=" + dbParam);
}
</script>

I’m loading from an external API, so I can’t exactly change it too much. When I click on any province, it just loops through a list of each province, rather than the individual province and it’s information. (So, ON, QC, etc.. rather than just ON)

I followed exact code from another solution and it did not work. I’ve fiddled a few days, and had no luck. It just loads everything, rather than one thing.
Thanks!

NodeJS Express Routing With Multiple URI/URL

I have a public folder inside my app which contains the HTML/CSS3/JS code.It has 2 part to it. One contains the public facing index.html inside public/web and another is the admin view which contain is only for admins. Below is the basic layout

public
     -->admins-->app/index.html
     -->web-->multi-page-layout-->webuild/index.html



app.use('/admin/login/system', gzippo.staticGzip("public/admins/app"));
app.use('/', gzippo.staticGzip('public/web/multi-page-layout/webuild'));

My problem is the base route / works as expected. but when I access /admin/login/system the page throws an error as CSS/JS files linked using script and link are not found.

Below is one of the error message generated in console

 http://localhost:5001/admin/login/plugins/moment.min.js

Attached screenshot for reference enter image description here

How can I create route so that I can access these pages and the pages should work fine and expected. Please note all are AngularJS app in different folder and using EJS is not feasible.

How can I fix the route so that the route /admin/login/system is loaded and so is its reference files from its index.html

Attaching reference of my folder structure

enter image description here

Why external JS won’t start?

after to make some research I took the measures to guarantee that the JS will be loaded before trying to run it but… it won’t work!

This works:

<!DOCTYPE html>
<head>
    <meta name="viewport" content="initial-scale=1" charset="utf-8">
</head>
<html>
    <body>
    <script type="text/javascript">
        function initialize() {
            console.log('foo')
        }

        window.onload = function() {
            initialize();
        };
    </script>
</body>
</html>

But this doesn’t:

<!DOCTYPE html>
<head>
    <meta name="viewport" content="initial-scale=1" charset="utf-8">
</head>
<html>
    <body>
    <script type="text/javascript" src="test.js">
    <script type="text/javascript">
        window.onload = function() {
            initialize();
        };
    </script>
</body>
</html>

test.js:

function initialize() {
    console.log('foo')
}

I don’t get any error. It just doesn’t work. What am I doing wrong?

Thanks!

State incrementing by more than expected

tearing my hair out here so would absolutely love some help.

I’m using ReactJS to make a language learning app, and have a parent component with to host a series of questions. The questions themselves are all contained in a child component called TestComponents, and when users get the a question right it should increment a state counter called index by one, then render the questions with this: {questions[index]}

But two of the five question components I’ve made are incrementing the count by two instead of one.

Each of the question components has this prop passed to it:
handleCorrect={() => handleCorrect()}

Which should call this function:

  const handleCorrect = () => {
    setCorrect(true);
    setIndex(prevIndex => prevIndex + 1);

    setTimeout(() => {
      setCorrect(false);
    }, 2000);
  };

So I can’t see anywhere in there which should be causing that function to be called twice. And if I put a console.log in it, that only appears once in my console – not twice, so it seems like this is incrementing by two instead of by one, rather than just calling the function twice.

As I say, three of the question components work fine, but the two that are breaking it are the below – apologies, because they’re both quite big, but I’ve scoured them to try and work out what is breaking it and just cannot spot it, so I’m worried that if I only put what seem to me like the relevant parts of them, I’m worried I’ll miss the part that’s actually breaking it!

I have, though, put a comment saying where I am intending for it to call that function in to highlight them.

The first is this:

export const Leniter = ({
  sentence,
  correctSentence,
  handleCorrect,
  handleSubmit,
  header,
  topic,
}) => {
  const [sentenceSplit, setSentenceSplit] = useState(sentence.split(" "));

  const [submitted, setSubmitted] = useState(false);
  const handleSubmitCheck = () => {
    setSubmitted(true);
  };

  const handleClick = (word, index) => {
    setSubmitted(false);

    if (word.slice(1, 2) == "h") {
      let sentence2 = [...sentenceSplit];
      let word2 = word.slice(0, 1) + word.slice(2);
      sentence2[index] = word2;
      setSentenceSplit(sentence2);
    } else {
      let sentence2 = [...sentenceSplit];
      let word2 = word.slice(0, 1) + "h" + word.slice(1);
      sentence2[index] = word2;
      setSentenceSplit(sentence2);
    }
  };


//********Call the handleCorrect prop here*********
  //handleCorrect / incorrect on submit
  if ((!handleSubmit || (handleSubmit && submitted)) &&
    sentenceSplit.join(" ") == correctSentence) 
    {
      handleCorrect(topic);
      setSubmitted(false)
      setSentenceSplit(sentence.split(" "))
    }

  handleSubmit &&
    submitted &&
    sentenceSplit.join(" ") !== correctSentence &&
    console.log("incorrect");

  return (
    <div className="testComponent">
      {header && header == "default" ? (
        <h3>
          Add or remove the <i>h</i> to make the correct form of the words:
        </h3>
      ) : (
        header && <h3>{header}</h3>
      )}

      <Paper
        sx={{
          display: "flex",
          justifyContent: "center",
          flexWrap: "wrap",
          listStyle: "none",
          minHeight: "20px",
          backgroundColor:
            (!handleSubmit || (handleSubmit && submitted)) &&
            sentenceSplit.join(" ") == correctSentence
              ? "lightgreen"
              : handleSubmit &&
                submitted &&
                sentenceSplit.join(" ") !== correctSentence
              ? "red"
              : "aliceblue",
          p: 0.5,
          m: 0,
          borderRadius: "5px 5px 5px 5px",
          border: "1px solid grey",
        }}
      >
        {sentenceSplit.map((word, index) => {
          return (
            <Chip
              onClick={(word) => handleClick(word.target.textContent, index)}
              label={word}
              sx={{ marginLeft: "5px" }}
            />
          );
        })}
      </Paper>

      {handleSubmit && (
        <SubmitBtn variant="contained" onClick={() => handleSubmitCheck()}>
          Submit
        </SubmitBtn>
      )}
    </div>
  );
};

And the second is this:

export const AccentSelector = ({
  sentence,
  handleCorrect,
  handleSubmit,
  header,
  topic,
}) => {
  const [submitted, setSubmitted] = useState(false);

  let accents = "aàeèiìoòuùAÀEÈIÌOÒUÙ";

  const [selectValue, setSelectValue] = useState([{}]);

  const handleChange = (event, index) => {
    setSubmitted(false);
    setCorrect([]);
    setSelectValue([
      ...selectValue,
      { index: index, value: event.target.value },
    ]);
  };

  //handleCorrect/incorrect
  const [correct, setCorrect] = useState([]);

  const handleSubmitCheck = () => {
    setCorrect([]);
    setSubmitted(true);
  };

  console.log(submitted, correct)

//********Call the handleCorrect prop here*********
  if (
    submitted &&
    correct.length > 0 &&
    correct.includes("true") &&
    !correct.includes("false")
  ) {
    handleCorrect();
    setSelectValue([{}]);
    setCorrect([])
  }

  return (
    <div className="testComponent">
      {header && header == "default" ? (
        <h3>Select the correct versions of the vowels:</h3>
      ) : (
        header && <h3>{header}</h3>
      )}
      <h3>
        {sentence.split("").map((letter, index) => {
          if (accents.split("").includes(letter)) {
            let val =
              selectValue.filter((arrayVal) => arrayVal.index == index).length >
              0
                ? selectValue.filter((arrayVal) => arrayVal.index == index)[
                    selectValue.filter((arrayVal) => arrayVal.index == index)
                      .length - 1
                  ].value
                : "?";

            let bgColor =
              (!handleSubmit || (handleSubmit && submitted)) &&
              selectValue.filter((arrayVal) => arrayVal.index == index).length >
                0 &&
              selectValue.filter((arrayVal) => arrayVal.index == index)[
                selectValue.filter((arrayVal) => arrayVal.index == index)
                  .length - 1
              ].value == letter
                ? "lightgreen"
                : (!handleSubmit || (handleSubmit && submitted)) &&
                  selectValue.filter((arrayVal) => arrayVal.index == index)
                    .length > 0 &&
                  selectValue.filter((arrayVal) => arrayVal.index == index)[
                    selectValue.filter((arrayVal) => arrayVal.index == index)
                      .length - 1
                  ].value != "?"
                ? "red"
                : "aliceblue";

            //push to Correct array
            if (bgColor == "lightgreen" && !correct.includes("true")) {
              setCorrect([...correct, "true"]);
            }

            if (
              (bgColor == "red" || bgColor == "aliceblue") &&
              !correct.includes("false")
            ) {
              setCorrect([...correct, "false"]);
            }

            switch (letter) {
              case "a":
              case "à":
                return (
                  <>
                    <Select
                      onChange={(event) => handleChange(event, index)}
                      value={val}
                      autoWidth
                      label={index}
                      size="small"
                      style={{
                        backgroundColor: bgColor,
                      }}
                    >
                      <MenuItem value="?">?</MenuItem>
                      <MenuItem value="a">a</MenuItem>
                      <MenuItem value="à">à</MenuItem>={" "}
                    </Select>
                  </>
                );
                break;
              case "è":
              case "e":
                return (
                  <>
                    <Select
                      onChange={(event) => handleChange(event, index)}
                      value={val}
                      autoWidth
                      label={index}
                      size="small"
                      style={{
                        backgroundColor: bgColor,
                      }}
                    >
                      <MenuItem value="?">?</MenuItem>
                      <MenuItem value="e">e</MenuItem>
                      <MenuItem value="è">è</MenuItem>={" "}
                    </Select>
                  </>
                );
                break;
              default:
                return <>broken</>;
            }
          } else {
            return <>{letter}</>;
          }
        })}
      </h3>
      {handleSubmit && (
        <SubmitBtn variant="contained" onClick={() => handleSubmitCheck()}>
          Submit
        </SubmitBtn>
      )}
    </div>
  );
};

Thank you so much for any help!