I can't see why my context api does not work in reactjs-CodePudding

i have been trying to implement a context api solution since i want to use children states(data) in my app.js without lifting up the states. anyways i have tried to implement it a context api soloution to by doing the following :

i created a folder names context and then created Context.js

the code is as follows:

mport { createContext,useState } from "react";
export const Mycontext = createContext()

const Context = ({children}) =>{
    const [post, setPost] = useState([])
    return(
        <Mycontext.Provider value={[post,setPost]}>
            {children}
        </Mycontext.Provider>
 
    )
}
export default Context

i wrapped the index.js file with the Provider wrapper as follows:

import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import Context from './context/Context';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Context>
     <App />

  </Context>
   
  
);

my main goal for now is to use useState hook data or states so i can use them in higher up comonents , in this case i want my post.js file to change usestate data in context so i can then use that data to post something in App.js using a container component that takes value as a props

i will post the both post.js and container.js and app.js below

import React,{useContext,useState,useEffect,useRef} from 'react'
import '../HomeMainStyling/HomeStyling.css'
import Tweets from './Tweets'
import Context from '../../context/Context'

function Tweet() {

    const tw = useRef('')
    
    const {post,setPost} = useContext(Context);
    useEffect(() => {
        if (post.length) console.log(post);
      }, [post]);
    
    function PostNow(event){
        
        event.preventDefault();
        
        setPost((oldpost) => [tw.current.value,...oldpost]);
        
        
        
        
    }
    
  return (
    
    <div className="tweetcontainer">
        <textarea ref={tw} className="tweetinfo"></textarea>
        <button className="postIt" onClick={PostNow}>tweet</button>
    </div>
    
  )
}

export default Tweet
//

the container is the following:

import React from 'react'
import '../HomeMainStyling/HomeStyling.css'
function Tweets({value}) {
  return (
    <h2>{value}</h2>
  )
}

export default Tweets

App.js:

import Tweet from './Center/HomeMain/Tweet';
import Tweets from './Center/HomeMain/Tweets';
import { useContext,useState } from 'react';
import Context from './context/Context';
function App() {
  const {post,setPost} = useContext(Context);
  return (
    <div className="App">
      
      <Tweet/>
      <Tweets value={post}/>
    </div>
  );
}

export default App;

the app should in principle post 1 h1 element for every click in Tweet components

CodePudding user response：

The useContext hook takes the context you created using createContext() as a parameter, but you are passing a custom component to it, so try:

import { Mycontext } from './context/Context';

const [post, setPost] = useContext(Mycontext)

CodePudding user response：

<Mycontext.Provider value={[post,setPost]}>

this is wrong you ahve to write

<Mycontext.Provider value={{post,setPost}}>