Unlocking the contents of an array from a separate file in Next.js

I am developing a Quiz App that consists of two main pages: takeQuiz.js and result.js. My goal is to transfer the data from the multiple-choice questions (mcqs) in takeQuiz.js to be accessible in result.js. Utilizing router.replace(), I ensure that once the user submits the quiz, they cannot go back.
takeQuiz.js

mcqsData = [
{quesId:1,correct:'Option A',selectedOption:'Option C'},
{quesId:1,correct:'Option C',selectedOption:'Option B'},
{quesId:1,correct:'Option D',selectedOption:'Option D'},
]

I attempted to access this array in result.js by using import data from './takeQuiz.js', but it resulted in returning undefined.

javascriptnode.jsreactjsnext.js

Answer №1

One crucial thing to remember is to include the export statement before your array. Otherwise, the import statement won't be able to access it.

export mcqsData = [
{quesId:1,correct:'Option A',selectedOption:'Option C'},
{quesId:1,correct:'Option C',selectedOption:'Option B'},
{quesId:1,correct:'Option D',selectedOption:'Option D'},
]

Then, in your main result.js file, make sure you import the array correctly. 

import {mcqsData} from './takeQuiz.js'

If you need more details on this topic, check out: https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export

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

AngularJS directive that offers dynamic functionality

Currently, I am working on dynamically inserting an ng-options directive within various <select> elements throughout my application. These elements have their own unique class names and other directives, such as ng-if, among others. <div ng-app=" ...

javascriptangularjsangularjs-directiveangularjs-scopeangularjs-compile

The jqueryMobile Dialog persistently opens during pageshow, despite having the cookie already set

My jQuery mobile dialog keeps opening every time the page is refreshed, despite having a cookie set to open it only once. I can't figure out why it's loading without any triggers. Any assistance would be greatly appreciated. JAVASCRIPT function ...

javascriptjqueryjquery-mobiledialog

Customize URL based on selected button

My question may be a bit unclear, but I want to generate dynamic URLs that redirect users to specific pages based on the link clicked. For example: Parent page with links (a, b, c, x, y) User clicks on 'b' User is taken to a Node Page that play ...

javascriptjqueryhtmlcss

Is it necessary to validate the variables once more in the router.get method even after validating them in the router.use method?

My current setup involves Node.js, Express framework, and MySQL as the database I am currently validating data within the 'use' method However, I am unsure if I should re-validate the data in the 'get' method? Here is a snippet of my ...

node.jsvalidationexpress

Problem with the object identification in Prisma Client when using MongoDB

Issue with ObjectID: The hex string provided contains an invalid character '-' at index 8: "135a20ad-3244-46ed-80cf-a09a37ae4e85" for the 'id' field. I encountered an error when attempting to add a new record in my database u ...

mongodbnext.jsprisma

I am attempting to retrieve the bot's permissions in order to validate if the command is authorized to execute

To verify if a command can be executed, I am attempting to retrieve the bot's permissions. Here is the code snippet I am using: let botid = "idbot" let bot = client.users.cache.get(botid) if (!bot.permissions.has("ADMINISTRATOR")) ...

javascriptnode.jsdiscorddiscord.js

"Upon pressing the submit button in the router.post function, a null value appears

In my form, I am attempting to redirect the page to the home URL after clicking the submit button. However, using res.redirect('/home') is not achieving the desired result. I have also tried using console.log("testing");, but that is not working ...

javascriptnode.jsformsexpresscontact-form

Avoid consistently updating information

I am experiencing a strange issue in my project. I have 2 tabs, and in one tab, there are checkboxes and a submit button. The user selects items from the checkboxes, and upon clicking the button, they should see their selections in the other tab. This fu ...

javascriptphpjqueryajaxcheckbox

Is there another option for handling this componentWillMount scenario?

Currently in the process of updating some outdated code. componentWillMount is no longer recommended. What would be the appropriate refactoring approach for this scenario? class Detail extends React.Component{ constructor(props) { super(props); ...

reactjsreact-lifecycle

Dealing with issues escaping unicode characters in JavaScript

Whenever I need to load data from an external file based on a specific event, I make use of the following jQuery code: $("#container").load("/include/data.php?name=" + escape(name)); An issue arises when the JavaScript variable "name" contains Unicode ch ...

javascriptjqueryloadescaping

Cannot detect react-script in the "npm run build" command when setting up the create-next-app project

Here is the content of my package.json file: "name": "food-recipe", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": &quo ...

reactjsnpmnext.jspackage.json

"An error occurred with the Ajax post request - bad request

I've encountered a strange issue while attempting to make a POST request using AJAX with the code snippet below: $('.login-form').on('submit', function(e) { e.preventDefault(); $.ajax({ type: "post", url: " ...

javascriptjqueryjsonajaxpost

Tips for positioning a React component above another component

I am currently facing a challenge while working on a table with an expand more option to display additional details for each specific row. I have implemented a slider to facilitate the expansion of the table. Presently, my ExpandToggle component is embedde ...

javascriptcssreactjscomponentsmaterial-ui

Consistently encountering incorrect values during onClick events

I am using a Table to display certain values const [selected, setSelected] = React.useState<readonly number[]>([]); const isSelected = (id: number) => selected.indexOf(id) !== -1; return ( <TableContainer> <Table sx={{ width ...

javascriptreactjsmaterial-uifrontend

Encountering an error when attempting to connect a nodejs REST API to an HTTPS URL using port 844

Attempting to initiate an API call from Node.js to a Tomcat server using the http/https module. There are two options for the API URL: - Functioning correctly and receiving a response var options = { host: 'samleapiurl.com', port: ...

node.jsapitomcatnpm

Using Ajax.BeginForm with BeforeSend functionality

My MVC website has multiple Ajax.BeginForm elements, and I am looking to handle the beforeSend event of my Ajax calls. While the code below works for manual jquery ajax calls, it does not seem to work with the Ajax.BeginForm helpers: $.ajaxSetup({ &a ...

javascriptjqueryajaxasp.net-mvc

Error: An issue occurred with the tasks in the Gruntfile.js file

pm WARN EPACKAGEJSON <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="74041506001a1106041b0600151834445a445a44">[email protected]</a> No description npm WARN EPACKAGEJSON <a href="/cdn-cgi/l/email-protection" ...

javascriptnode.jsamazon-ec2gruntjsnpm

Guide on implementing modals in reactstrap version 9 (compatible with Bootstrap version 5)

Struggling with Reactstrap Modal implementation? Check out the documentation here The documentation mentions a function called noRefCheck(){} which I am unsure how to use Here is an example of how it is used: <div> <Button color="dang ...

reactjsbootstrap-4bootstrap-modalbootstrap-5reactstrap

The webpage fails to return to its original position after the script has been executed

My website has a sticky div that stays at the top when scrolling down, but does not return to its original position when scrolling back up. Check out this example function fixDiv() { var $div = $("#navwrap"); if ($(window).scrollTop() > $div.data("top ...

javascriptjquerycss

Error: React-Redux unable to locate Redux context value while utilizing useSelector function

After creating a store and authreducer, everything was working as expected. However, when I added the useSelector in app.js, an error occurred: ERROR Error: could not find react-redux context value; please ensure the component is wrapped in a <Provid ...

javascriptreact-nativereduxreact-reduxexpo