"triggering passcode verification with a click of a React

Struggling with a React issue and seeking help. I've been following a tutorial on YouTube, working in CodeSandbox. Whenever I click the button, an error pops up. Can anyone assist me in resolving this? Here is a snippet of my code:

Link to my CodeSandbox

Link to tutorial video

return (
    <>
      {/* {JSON.stringify(pressedNumbers)} */}
      <div>
        {error}
        {isCorrrect ? (
          <div>success!</div>
        ) : (
          <div className="number-pad">
            {numbers.map((number, idx) => (
              // ...cur needs to be array of numbers
              // idx we don't do any sorting on the array
              <button
                key={idx}
                onClick={(cur) => setPressedNumbers(...cur, number)}
              >
                {number}
              </button>
            ))}
          </div>
        )}
      </div>
    </>
  );

Answer №1

When you click, setPressedNumbers will update by adding the number to the current array using spread syntax.

Consider this approach because pressedNumbers is an array and should be updated instead of directly spreading it.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Jquery's .text() and .html() methods seem to be malfunctioning

Utilizing a jQuery function: $("#btn1").click(function(){ $("p").text("") } Each time the button is clicked, the .text() field fails to load. When I modify the value of .text to a shorter string, it functions correctly. ...

Picking the following div using a button and updating its content

I am currently working on a project that involves 4 div elements, each with its own value (for example: 0). There is also a button with plus and minus functionality to change the values in each box. Additionally, there is a "set next" button to move on to ...

What is the best way to save the result of a post ajax request in a variable?

I am attempting to make an AJAX call to one API, store the response in a variable, and then display that output to the user. So far, I have experimented with two different methods: var Fake = $.ajax({async:false, url:'http://9dbad321.ngrok.io/output ...

Customizing the appearance of the Bootstrap Typeahead

I've been experimenting with the Bootstrap Typeahead for my search feature. I successfully implemented the dropdown list using Ajax. However, I am looking to customize the width, padding, and background color of the dropdown menu, which is currently w ...

Angular Material Design auto-complete textbox with assertive selection

Presently, I am utilizing Angular Material Design and everything is functioning as expected. However, I am now looking to implement autocomplete (Angular Material Design) in a way that forces the user to always choose an option without the ability to manua ...

How can I utilize an exported function in a separate HTML component with Angular?

I have a function that I exported in a separate file. export function sum(population): string { return population.toString().replace(/\B(?=(\d{3})+(?!\d))/g, "."); } I imported this function in my component like this: import { ...

"I am facing an issue where the button does not appear centered after using jQuery

I can't help but notice that when applying CSS directly, my buttons end up centered horizontally. Yet, when I insert the same code using append(), the buttons seem to align towards one side instead. Here is the HTML/CSS code snippet: <div style=" ...

The full background width is not being displayed as 100% on the

Unexpectedly, the "full left secondary-bg" background division on this particular page (http://goo.gl/OU4MkW) is no longer spanning the full width of the screen and I am unable to figure out why. This website is WordPress-based and constructed using the sk ...

Issue with border in a nested table within an HTML table

I am faced with an issue in styling nested tables. My goal is to have borders on both tables, but I specifically need only the bottom border of the inner table without the top, right, and left borders. The default border style can be achieved using the fol ...

Displaying only the radio button without any additional elements, the Ionic 2 radio button (<ion-radio>) offers a

Looking for some guidance on implementing a list with radio buttons using the ion-list and ion-radio directives. The code provided should be clear, but please feel free to ask for more details if needed. I'm still new to Ionic and may be making some ...

Flexbox helps create responsive layouts with ease

Utilizing flex to centrally position my element within my layers has worked well for me, but I encountered an issue when switching to a smaller screen size. The element simply scales down in size instead of taking up the full width like it does with Bootst ...

Positioning a single column of iframes in the center

I have 6 graphs that I need to arrange in a grid with 2 rows and 3 columns. Each row should have one left-aligned graph, one center-aligned graph, and one right-aligned graph. However, the center-aligned graphs are not displaying correctly. Can someone hel ...

Place your cursor over the following element to take control

There is a paragraph that needs to be clipped when hovered over. An issue arises where the H1 text shifts its position. Only the phrase "HOVER ABOVE PARAGRAPH" should be concealed. * { margin: 0; box-sizing: border-box; } .wrapper { displ ...

The insertRule() function seems to be failing to add the rule as expected, yet no

I've encountered an issue where I'm attempting to directly insert a style rule into the head of a document. Although it successfully inserts the style element, the code itself does not get inserted. Strangely, there are no errors being thrown. v ...

Switching sub components based on routing through navigation links after logging in

I'm having an issue with my routing setup while transitioning from the login page to the main page. Here's how my Routes are structured: App.jsx <BrowserRouter> <Routes> <Route path="/main/" element={<Main ...

Arrange objects on a grid

I've got an array filled with objects, each containing 3 images, a name, and some details. I'm attempting to display these objects on Bootstrap cards, but currently each card is showing up on its own line. My goal is to arrange the cards in a gri ...

Does Jquery AJAX send back raw data or HTML ready for use?

I'm currently developing a mobile app using Jquery Mobile. In order to populate the app with data, I need to make requests to an API and display the information within the app. At this point, I have two possible options: The API returns JSON data ...

Synchronize the hiding and displaying of elements with a corresponding element

If I had a pair of <div> elements set up like this: <div class="overlay"></div> <!-- More content here --> <div class="popup"></div> Whenever the div.popup element is displayed with display: block, I want the div.overl ...

Incorporate JavaScript to dynamically fetch image filenames from a directory and store them in an array

By clicking a button, retrieve the names of images from a folder and store them in an array using jQuery. I currently have a script that adds images to the body. In the directory images2, there are 20 images stored. The folder images2 is located in my i ...

"Troubleshooting: jQuery Find function not functioning correctly with HTML template

I am having trouble with a Shopify liquid code that I am trying to load into an HTML template <script type="text/template" id="description"> <div class="product-ddd"> {{ product.description }} </div> ...