ReactJS Context API not passing the data-CodePudding

I am trying to use Context API to create a Trello Clone application. Currently the ElementContext.js does not pass any data to App.js or HomePage.jsx.

I have tried multiple different methods but all result in not finding the data or saying "... is not defined" or just simply not working. My code is listed below.

App.js:

import React, { useContext } from 'react';
import './App.css';
import Todobox from './components/Todobox';
import HomePage from './components/HomePage'
import { ElementContext } from './ElementContext';

function App() {
  return (
    <>
    <ElementContext.Provider>
      <HomePage />
    </ElementContext.Provider>
    </>
  );
}

export default App;

ElementContext.js:

import React, { createContext, useState } from 'react';
import Todobox from './components/Todobox';

export const ElementContext = createContext();

export const ElementContextProvider = () => {
    const [elements, setElements] = useState([]);

    const newElement = () =>{
        setElements('Todobox');
    };

    const value = {
        elements,
        setElements,
        newElement
    };

    return(
        <ElementContext.Provider value={value}> </ElementContext.Provider>
    )
}

export default ElementContext;

HomePage.jsx:

import react from 'react';
import { useContext } from 'react';
import '../App.css';
import ElementContext from '../ElementContext';

export default function HomePage(){
    const newElement = useContext(ElementContext);
    return(
        <div className='page-container'>
        <div className='header'>
          <a className='header-title'>Trello Clone!</a>
          <a className='header-button' onClick={newElement}>Create a list</a>
        </div>
      <div className='element-field'>
      </div>
    </div>
    )
}

Any help is appreciated since I am new! Thank you in advanced! :)

CodePudding user response：

App.jsx

import React, { useContext } from 'react';
import './App.css';
import Todobox from './components/Todobox';
import HomePage from './components/HomePage'
import { ElementContextProvider } from './ElementContext';

function App() {
  return (
    <>
    <ElementContextProvider>   // NOT <ElementContext.Provider>
      <HomePage />
    </ElementContextProvider>
    </>
  );
}

export default App;

ElementContext.jsx

import React, { createContext, useState } from 'react';
import Todobox from './components/Todobox';

export const ElementContext = createContext();

export const ElementContextProvider = ({children}) => {
    const [elements, setElements] = useState([]);

    const newElement = () =>{
        setElements('Todobox');
    };

    const value = {
        elements,
        setElements,
        newElement
    };

    return(
        <ElementContext.Provider value={value}>
            {children}        // PASS CHILDREN COMPONENT
        </ElementContext.Provider>
    )
}

// export default ElementContext;  // REMOVE THIS LINE

Edited HomePage.jsx

import react from 'react';
import { useContext } from 'react';
import '../App.css';
import ElementContext from '../ElementContext';

export default function HomePage(){
    const { newElement } = useContext(ElementContext);  // NOT const newElement = useContext(ElementContext);
    return(
        <div className='page-container'>
        <div className='header'>
          <a className='header-title'>Trello Clone!</a>
          <a className='header-button' onClick={newElement}>Create a list</a>
        </div>
      <div className='element-field'>
      </div>
    </div>
    )
}

Hope this is helpful for you.