Usestate React

 import React, { useState } from 'react';


export default function QuizNavBar({ questions }) {
  const [questionIndex, setQuestionIndex] = useState(0);

  const goBack = () =>
    setQuestionIndex((prevQuestionIndex) => prevQuestionIndex - 1);
  const goToNext = () =>
    setQuestionIndex((prevQuestionIndex) => prevQuestionIndex + 1);

  const onFirstQuestion = questionIndex === 0;
  const onLastQuestion = questionIndex === questions.length - 1;

  return (
    <nav>
      <span>Question #{questionIndex + 1}</span>
      <div>
        <button onClick={goBack} disabled={onFirstQuestion}>
          Go Back
        </button>
        <button onClick={goToNext} disabled={onLastQuestion}>
          Next Question
        </button>
      </div>
    </nav>
  );
}

Comments

Post a Comment

Popular posts from this blog

To read data from database using mongo driver

  const MongoClient = require ( "mongodb" ). MongoClient ; // Replace the uri string with your MongoDB deployment's connection string. const url = "mongodb://localhost:27017" ; const client = new MongoClient ( url ); async function run () {   try {     await client . connect ();         const cursor = client . db ( "newFruits" ). collection ( "fruits" ). find ({});     const results = await cursor . toArray ();     if ( results . length > 0 ) {         console . log ( `Found listing(s)` );         results . forEach (( result , i ) => {                         console . log ( `$_id: ${ result . _id } name: ${ result . name } review: ${ result . rating } ` );                            });     } else {       ...
Read more

To do list (without styling and css)

the html file is written in the file having extension as ejs rather than HTML because it can include embedded javascript logic inside the file itself. html of ejs todo list:- <!DOCTYPE html> <html lang="en" dir="ltr">   <head>     <meta charset="utf-8">     <title>To do List</title>   </head>   <body>     <% if(kindOfDay==="Saturday"||kindOfDay==="Sunday"){ %>     <h1 style="color:Purple"> <%= kindOfDay %> </h1>     <% } else { %>       <h1 style="color:Blue"> <%= kindOfDay %> </h1>     <%  } %>     <ul>     <% for (var i = 0; i<newListItems.length; i++){ %>       <li> <%= newListItems[i] %> </li>     <% } %>       </ul>     <form class="" action="/" method="post"> ...
Read more

Template, layout and scope

 Templates:- Prewritten line of codes that a developer or programmer can modify according to his/her needs. The use of templates removes repetition saving a lot of time and making it easier for a developer to create a project. Also, templates are blocks of codes which add feature and content to be render on the page. Layout:- Layouts are files that define the structure of the page such as header, footer, navbar, sidebar, etc Concept of scope:- generally there are two types of scope: 1.) Local: which can only be accessed inside the function they are declared in. 2.) Global: This can be accessed throughout the program. Generally, all data types can be local as well as variable: eg: if var, let, const, are declared inside a function they will be local, and if created outside the function they will be global, but if these three are declared in conditional or loop statements the let will behave differently than var, and const. Meaning in conditional and loop statements the let statement...
Read more