The website gets stuck when I click next question

2021-01-26 10:51 Ahsan Azeem imported from Stackoverflow

When I click the button my website stucks I dont know what is happening. I am using the while loop to not repeat the question in my quiz app. Help will be appreciated. The App and Questions function components are listed below. I am bringing my questions from an object array.

App.js

'''

import "./App.css";
import Questions from "./layout/Questions";

function App() {
  return (
    <div>
      <Questions />
    </div>
  );
}

export default App;


'''

Questions.js




import React, { useState } from "react";
import mcqs from "../data/mcqs";

const Questions = () => {
const handleButtonClick = () => {
 setquestionCounter(questionCounter + 1);
};
let randomQuestion = Math.floor(Math.random() * mcqs.length);
let [questionCounter, setquestionCounter] = useState(1);

if (questionCounter <= mcqs.length) {
 while (mcqs[randomQuestion].question === "999") {
   randomQuestion = Math.floor(Math.random() * mcqs.length);
 }
}
const string = mcqs[randomQuestion].question;
mcqs[randomQuestion].question = "999";
return (
 questionCounter <= mcqs.length && (
   <div className="questions">
     Q{questionCounter}:{string}
     <button onClick={handleButtonClick}>Next Question</button>
   </div>
 )
);
};

export default Questions;

1 answer

answered 2021-01-26 11:23 Yevgen Gorbunkov

You seem to be triggering the infinite loop. By the way, doing the guesswork until getting the item that was not previously shown is not a good idea. You'd be much better off splicing the array of questions to show upon each iteration until it's empty:

const { useState, useEffect } = React,
      { render } = ReactDOM,
      rootNode = document.getElementById('root')
      
const questions = ['q1', 'q2', 'q3', 'q4', 'q5']

const Question = ({question, pickQuestion}) => {
  return (
    <div>
      <div>{question}</div>
      <button onClick={pickQuestion}>Next Question</button>
    </div>
  )
}

const App = () => {
  const [currentQuestion, setCurrentQuestion] = useState(),
        [questionsToShow, setQuestionsToShow] = useState(questions),
        nextQuestion = () => {
          const questionsToShowCopy = [...questionsToShow],
                nextQuestionIdx = 0|Math.random()*questionsToShowCopy.length
          setCurrentQuestion(questionsToShowCopy.splice(nextQuestionIdx,1))
          setQuestionsToShow(questionsToShowCopy)
        }
        
  useEffect(nextQuestion, [])
  
  return (
    <div>
      <Question 
        question={currentQuestion} 
        pickQuestion={nextQuestion} 
      />
    </div>
  )
}

render (
  <App />,
  rootNode
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>

See also questions close to this topic

How to show a confirmation when user leaves the window - JS

I want to call a button click event when user tries to leave the page. That button click have a confirmation message. Using below java script , I can call the button click event when user leaves the page and the confirmation message is popup correctly. But I want the user to navigate out of the page as usual when clicks 'CANCEL' on the confirmation box. Or after clicking 'OK' once. But, now when clicks on 'OK' or 'CANCEL', and user tries to leave the mouse out of page,the popup is coming again. How can I control this?

 $(document).mouseleave(function () {
 document.getElementById("<%=btn_save.ClientID %>").click();});

 function Confirm2() {
        var confirm_value = document.createElement("INPUT");
        confirm_value.type = "hidden";
        confirm_value.name = "confirm_value";
        if (confirm("Do you want to save the details? ")) {
            confirm_value.value = "OK";
        } else {
            confirm_value.value = "CANCEL";
        }
        document.forms[0].appendChild(confirm_value);
    }

<asp:ImageButton ID="btn_save" autopostback="false" runat="server" ImageUrl="~/images/BtnSave.png" Width="145px" Height="48px" CausesValidation="false" OnClientClick="Confirm2()" OnClick="onclick_Save" />

Execute function A every 2 seconds, execute function B every millisecond for 1 second, then pause for 1 second, and then repeat in JS

Like the title of the question of say, I want functions A and B to happen in those time intervals in JavaScript. Function A is done easily with setInterval(A, 2000), but I'm not sure how I would make B happen. I can think of a method where I set a variable k and increment it every millisecond, and then either reset it to 0 when it reaches 1000 or take a modulo, but I wanted to know if there was any special syntax to perform these timing events.

hide navigation menu when click on blank area

So, I have this code, and I'm trying to understand how it works

This is perfect working navigation menu.. when click on "cut button" menu hide perfect without any problem..

Let's say, I wanna make it auto hide when click on blank right side area,

how to get this javascript?

Begginer here, so thanks to everyone! :)

! function(e) {
  var t = {};

  function n(o) {
    if (t[o]) return t[o].exports;
    var r = t[o] = {
      i: o,
      l: !1,
      exports: {}
    };
    return e[o].call(r.exports, r, r.exports, n), r.l = !0, r.exports
  }
  n.m = e, n.c = t, n.d = function(e, t, o) {
    n.o(e, t) || Object.defineProperty(e, t, {
      enumerable: !0,
      get: o
    })
  }, n.r = function(e) {
    "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {
      value: "Module"
    }), Object.defineProperty(e, "__esModule", {
      value: !0
    })
  }, n.t = function(e, t) {
    if (1 & t && (e = n(e)), 8 & t) return e;
    if (4 & t && "object" == typeof e && e && e.__esModule) return e;
    var o = Object.create(null);
    if (n.r(o), Object.defineProperty(o, "default", {
        enumerable: !0,
        value: e
      }), 2 & t && "string" != typeof e)
      for (var r in e) n.d(o, r, function(t) {
        return e[t]
      }.bind(null, r));
    return o
  }, n.n = function(e) {
    var t = e && e.__esModule ? function() {
      return e.default
    } : function() {
      return e
    };
    return n.d(t, "a", t), t
  }, n.o = function(e, t) {
    return Object.prototype.hasOwnProperty.call(e, t)
  }, n.p = "", n(n.s = 0)
}([function(e, t, n) {
  "use strict";
  n.r(t);
  var o;
  n(1);
  window.addEventListener("resize", (function() {
    document.body.classList.add("resize-animation-stopper"), clearTimeout(o), o = setTimeout((function() {
      document.body.classList.remove("resize-animation-stopper")
    }), 400)
  }));
  var r = document.querySelector(".nav-toggle"),
    i = document.querySelector(".menu-toggle");
  r.addEventListener("click", (function(e) {
    this.classList.toggle("open"), i.classList.toggle("active"), e.stopPropagation()
  })), document.querySelector(".dropdown a").addEventListener("click", (function(e) {
    this.nextElementSibling.classList.toggle("show"), this.parentNode.classList.toggle("active"), e.stopPropagation()
  })), document.querySelector(".second-level a").addEventListener("click", (function(e) {
    this.nextElementSibling.classList.toggle("show"), this.parentNode.classList.toggle("active"), e.stopPropagation()
  }))
}, function(e, t, n) {}]);

* {
  margin: 0;
  padding: 0;
}
html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
*,
:after,
:before {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}
body {
  width: 100%;
  background-color: #eee;
  color: #222;
}
header {
  padding: 0;
  margin: 0;
}
.nav__container, header {
  width: 100%;
  background-color: #fafafa;
}
.nav__container {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  padding: 0 1px;
}
.nav__mobile .nav__btn {
  display: block;
  margin: 4px 6px 4px 0;
}
.nav__mobile {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: #0a499014;
}
.nav__logo {
  font-size: 15px;
  font-weight: 700;
  color: #555;
  z-index: 99;
  width: 76%;
  background: #e6ebf1;
}
.nav__menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow: hidden;
  border-top: 1px solid #fff;
}
.showing {
  max-height: 37rem;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.nav__menu li {
  list-style: none;
  position: relative;
  white-space: nowrap;
  padding: 1rem 0 0;
}
.nav__menu li a {
  display: block;
  font-size: 18px;
  padding-left: 26px; 
  color: #fff;
  text-decoration: none;
}
.nav__menu .dropdown ul a {
    margin-left: 10px;
}
.nav__menu .dropdown .second-level ul {
    margin-left: 15px;
}
.nav-toggle {
    display: block;
    background-color: #1abc9b;
    width: 52px;
    height: 51px;
    cursor: pointer;
    padding: 11px 6px;
    border-radius: 3px;
}
.nav-toggle span {
    position: relative;
    display: block;
    height: 6px;
    border-radius: 17px;
    width: 100%;
    margin-top: 0;
    background-color: #fff;
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
}
.nav-toggle span.mrg {
  margin-top: 5px;
}
.nav-toggle.open span:first-child {
  -webkit-transform: rotate(45deg) translate(7.2px, 7.2px);
  transform: rotate(45deg) translate(7.2px, 7.2px);
}
.nav-toggle.open span:nth-child(2) {
  width: 0;
  opacity: 0;
}
.nav-toggle.open span:last-child {
  -webkit-transform: rotate(-45deg) translate(7.2px, -7.2px);
  transform: rotate(-45deg) translate(7.2px, -7.2px);
}
.nav__menu .dropdown ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  position: static;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.nav__menu .dropdown ul.show {
  max-height: 20rem;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.nav__menu .dropdown li a {
  display: block;
  font-size: 0.875rem;
  text-transform: capitalize;
  color: #fff;
}
.nav__menu li a:hover {
  color: #0062a3;
}
 .nav__menu .dropdown ul a:before {
    content: "\0272A"; 
    padding-right: 4px;
    font-size: 15px;
}
.nav__menu .dropdown > a:after {
  content: "\276F";
  font-weight: 900;
  font-size: 0.875rem;
  padding-left: 5px;
  color: #1abc9b;
}
.nav__menu .active.dropdown > a:after {
  content: "\02C5";
}
.nav__menu .dropdown .dropdown > a:after {
  content: "\276F";
  font-weight: 900;
  font-size: 0.875rem;
  padding-left: 5px;
  color: #1abc9b;
}
.nav__menu .dropdown .active.dropdown > a:after {
  content: "\02C5";
}
.menu-toggle {
    max-height: 0;
    overflow: scroll;
    position: fixed;
    width: 80%;
    z-index: 15;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #883442;
    transform: translateX(-100%);
}
nav.menu-toggle.active {
    transform: translateX(0);
}

.menu-toggle,
.menu-toggle.active {
  transition: transform 0.2s ease-in-out;
}
.menu-toggle.active {
  max-height: 100vh;
  padding: 50px 0 0 0;
}
.resize-animation-stopper * {
  transition: none !important;
  -webkit-transition: none !important;
  animation: none !important;
  -webkit-animation: none !important;
}

<header>
  <div class="nav__container">
    <div class="nav__mobile">
      <div class="nav__logo">
       <a href="#"><img src="https://www.examsbook.com/img/home/examsbook_logo.png" alt="Exam"></a>
      </div>
      <div class="nav__btn">
        <a aria-label="Mobile menu" class="nav-toggle fade"><span></span><span class="mrg"></span><span class="mrg"></span></a>
      </div>
    </div>

      <nav class="menu-toggle">
        <ul class="nav__menu">
          <li><a href="">Menu item 1</a></li>
          <li><a href="">Menu item 2 </a></li>
          <li><a href="">Menu item 3 </a></li>
          <li class="dropdown"><a href="#">Dropdown</a>
            <ul>
              <li><a href="">Dropdown item 1</a></li>
              <li><a href="">Dropdown item 2</a></li>
              <li><a href="">Dropdown item 3</a></li>
              <li class="dropdown second-level"><a href="#">2nd level dropdown</a>
                <ul>
                  <li><a href="">Dropdown item 1</a></li>
                  <li><a href="">Dropdown item 2</a></li>
                  <li><a href="">Dropdown item 3</a></li>
                </ul>
              </li>
              <li><a href="">Dropdown item 3</a></li>
              <li><a href="">Dropdown item 4</a></li>
            </ul>
          </li>
          <li><a href="">Menu item</a></li>
          <li><a href="">Menu item</a></li>
          <li><a href="">Menu item</a></li>
        </ul>

      </nav>
  </div>
</header>

React native : Tab bar button 'OnPress' not working outside the scope of the Tab bar
As you can see, from the image attached:

1 arrow: The tab bar button does not work outside this scope

2 arrow: The tab bar button does work as it's inside the scope of the tab bar.

Code within navigation container:
```
 <BottomTab.Screen
    options={{
      //   tabBarIcon: ({}) => <VerifyFloatingButton />,
      tabBarOnPress: () => {
        null;
      },
      tabBarButton: ({}) => <VerifyButton size={30} />,
    }}
    name="asafaas"
    component={NullButton}
  />
```
Any way to make the button operational outside the scope of the tab bar?

Problem in implementing Search Filter in Reactjs- Trigger issues

I am implementing a react data table with a search filter in it to search the rows. You can see the UI here for a better understanding of code. I implemented it to search the rows by names initially. (I will implement it to search in all columns later).

As you can see in the UI that there are three entries at top named "Kamakshi", "Kanika" and "Kanika" respectively. When I type "Kam" in the search box then this result is shown. Now on pressing backspace my input becomes "ka", which means my search result should show three rows of "Kamakshi", "Kanika" and "Kanika". But there are no changes.

I want to trigger the search filter everytime there is a change in input. I passed it as dependency in useEffect but it didn't worked.

Here is my Bookings2.js (Table is implemented in this)

import React, {useState, useEffect} from 'react';
import axios from 'axios';
import {Link} from 'react-router-dom';
import '../../static/Bookings.css';
import {BsFilterRight} from "react-icons/bs";

let bookings_array = [];    
const Bookings2= ()=>{
    const[Bookings, setBooking]=useState([]);
    const[search, setSearch]=useState("");

    useEffect(()=>{
        loadUsers();
    }, []);

    useEffect(()=>{
        if(search.length){
        setBooking(
                Bookings.filter(Booking =>
                    Booking.name.toLowerCase().includes(search.toLowerCase())
                )
            )
        }else{
            setBooking(bookings_array)
        }
    }, [search, Bookings]);


    const loadUsers= async()=>{
        const result =await axios.get("http://localhost:3001/Bookings");
        bookings_array=result.data.reverse();
        setBooking(bookings_array);
    };

    const deleteUser=async id => {
        await axios.delete(`http://localhost:3001/Bookings/${id}`);
        loadUsers();
    }

    return(
        <div className="Booking-page-container">
            <h2 className="text-center mb-4">Bookings2 Page</h2>
            <table class="table table-bordered table-striped border shadow">
                <thead>
                    <tr>
                        <th scope="col" colSpan={5}>
                        <BsFilterRight/> &nbsp;
                            <input 
                                placeholder=" search....."
                                onChange={e=>setSearch(e.target.value)}
                            />  
                        </th>
                    </tr>
                </thead>
          
                <thead class="thead-dark">
                    <tr>
                        <th scope="col"></th>
                        <th scope="col">Name</th>
                        <th scope="col">Consultant</th>
                        <th scope="col">Email</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    {Bookings.map((Booking,index)=>(
                        <tr>
                            <th scope="row">{index+1}</th>
                            <td>{Booking.name}</td>
                            <td>{Booking.consultant}</td>
                            <td>{Booking.email}</td>
                            <td>
                                <Link class="btn btn-primary mr-2" to={`/Bookings/view/${Booking.id}`}>View</Link>
                                <Link class="btn btn-outline-primary mr-2" to={`/Bookings/edit/${Booking.id}`}>Edit</Link>
                                <Link class="btn btn-danger" onClick={()=>deleteUser(Booking.id)}>Delete</Link>
                            </td>
                        </tr>   
                    ))}
                </tbody>
            </table>
        </div>
    );
};

export default Bookings2;

How can i create a component as a function?

i am using this library "styled-components" to create components

import styled, { keyframes } from "styled-components";
const Feet = styled.div`
  background-color: #fff;
  min-width: 290px;
  max-width: 420px;
  border-radius: 10px;
  padding-bottom: 3rem;
`;

but i dont want to use anymore that library, i want to create my own component

This is my component, my component is inside of Mycomponent:

const styles = makeStyles(theme => ({
  body: {
    backgroundColor: '#fff',
  minWidth: '290px',
  maxWidth: '420px',
  borderEadius: '10px',
  paddingBottom: '3rem',
  },
}))

this is my component:

const Mycomponent = ({}) => {
const Feet = () => { 
    return <div className={styles.body}></div>
  }

and i want to use like this:

 return (
    <Feet/>

but this dont worked, it render but is not similar is not equal

Related questions

The website gets stuck when I click next question

1 answer

See also questions close to this topic