Got a problem with React useContext - returns undefined and have no idea what's wrong-CodePudding

As title, I am learning React and I decided to use useContext function in my app for the first time. When I try to fetch useContext value, it returns undefined no matter what. I've tried a lot of combinations with .Provider in main file, nothing has changed.

App.js

import React, { useState } from 'react'
import './index.css'
import Data from './data.json'
import Comment from './Comment'

function App() {

  const [content, setContent] = useState((Data))
  const LoggedUser = React.createContext(Data.currentUser.username)
  const comments = content.comments

  return (
    <LoggedUser.Provider value={Data.currentUser.username}>
      {comments.map((value) => {
        <Comment key={value.id} image={value.user.image.png} username={value.user.username} created={value.createdAt} content={value.content} score={value.score} replies={value.replies} />
      })}
    </LoggedUser.Provider>
  )
}

export default App

Comment.js

import React from 'react'
import Reply from './Reply'

function Comment(props) {
  return (
    <div className='container'>
        <div className='comment'>
            <div className='header'>
                <img src={props.image} alt='image' />
                <span>{props.username}</span>
                <span>{props.created}</span>
            </div>
            <div className='content'>
                {props.content}
            </div>
            <div className='footer'>
                <div className='input'>
                    <img src='./images/icon-plus.svg' alt='plus' />
                    <img src='./images/icon-minus.svg' alt='minus' />
                    {props.score}
                </div>
                <div className='reply'>
                    <img src='./images/icon-reply.svg' alt='reply' />
                    <span>Reply</span>
                </div>
            </div>
        </div>
        {props.replies &&
            props.replies.map((value) => {
                return <Reply key={value.id} image={value.user.image.png} username={value.user.username} created={value.createdAt} content={value.content} score={value.score} replies={value.replies} replyTo={value.replyingTo}/>
            })
            
        }
    </div>
  )
}

export default Comment

Reply.js

import React from 'react'

function Reply(props) {

  const user = React.useContext(LoggedUser)
  
  return (
    <div className='reply'>
            <div className='header'>
                <img src={props.image} alt='image' />
                <span>{props.username}</span>
                <span>{props.created}</span>
            </div>
            <div className='content'>
                <span>@{props.replyTo}</span> {props.content}
            </div>
            <div className='footer'>
                <div className='input'>
                    <img src='./images/icon-plus.svg' alt='plus' />
                    <img src='./images/icon-minus.svg' alt='minus' />
                    {props.score}
                </div>
                <div className='reply'>
                    <img src='./images/icon-reply.svg' alt='reply' />
                    <span>Reply</span>
                </div>
            </div>
        </div>
  )
}

export default Reply

As it's shown, I am trying to fetch LoggedUser value from App.js in Reply.js, but each time I've tried, I've got this error 'Compiled with problems:X

ERROR

src\Reply.js Line 5:33: 'LoggedUser' is not defined no-undef

Search for the keywords to learn more about each error.' Help me out guys please, I would really appreciate your help. If anybody asks, Data.currentUser.username returns the username from file correctly.

CodePudding user response：

The issue is that you haven't imported LoggedUser into the Reply component

You should be calling React.createContext outside of your component, and you should export the result.

Example:

import React from 'react'

export const LoggedUser = React.createContext(Data.currentUser.username)

export function App() {

  const [content, setContent] = useState((Data))
  const comments = content.comments

  return (
    <LoggedUser.Provider value={Data.currentUser.username}>
      {/* etc */
    </LoggedUser.Provider>
  )
}

import React from 'react'
import { LoggedUser } from './App.js' //or wherever it is

export function Reply(props) {

  const user = React.useContext(LoggedUser)
  
  //etc
}

It may also help to use named imports instead of default imports if you are exporting multiple things from a file.

CodePudding user response：

The LoggedUser context should be exported from App.js and imported to Reply.js.