I don't know why I am getting error while exporting FirstName?

April 11, 2023

import React, { createContext } from 'react';

import './App.css';

import ComA from './ComA.jsx';

function App() {

  const FirstName = createContext();

  return (
    <>
      <FirstName.Provider value={'Ganesh'}>

        <ComA />

      </FirstName.Provider>
    </>
  );
}

export default App;


export { FirstName };

output:

ERROR in \[eslint\]
src\\App.js
Line 28:9:  Parsing error: Export 'FirstName' is not defined. (28:9)

webpack compiled with 2 errors

>Solution :

The error message suggests that you are trying to export something that has not been defined. In this case, you are trying to export the FirstName context, but it has only been defined within the App component.

To fix this error, you can move the createContext outside of the App component and export it directly. Here is an example:

import React, { createContext } from 'react';
import './App.css';
import ComA from './ComA.jsx';

export const FirstNameContext = createContext();

function App() {
  return (
    <FirstNameContext.Provider value={'Ganesh'}>
      <ComA />
    </FirstNameContext.Provider>
  );
}

export default App;

With this change, you can now import the FirstNameContext in other files:

import React, { useContext } from 'react';
import { FirstNameContext } from './App';

function ComA() {
  const firstName = useContext(FirstNameContext);

  return (
    <div>
      My name is {firstName}.
    </div>
  );
}

export default ComA;