Unable to define an imported object from a different file , store in a state and spread it in another variable in React

Question

I have defined an object which is the structure of the form which I will use. This file is createCourseForm.js and I am trying to import it in createCourseMain.js and store it in a state. Then I am trying to spread it in another variable so that I will be using it in a handler function. But I am getting 'firstPageData' is not defined no-undef and here firstPageData is the state which I am using to store the object. I don't know what's wrong but I guess the state is not updating.

https://codesandbox.io/s/cranky-haze-ptzrh?file=/src/createCourseForm.js

Answer 1

You need to complete the following steps to export and then import a value from one file to another.

First, export the object on the file you created it (in createCourseForm.js)

export const firstPageData = {
    // content of the object ...
};

Then import it on the file(s) you will use it (in createCourseMain.js)

import {firstPageData} from "./createCourseForm.js";

Finally, you need to initialize or set the variables you need to copy this value into.

const [newVariable, setNewVariable] = useState(firstPageData);