J'ai essayé de nombreuses méthodes. Après avoir lu la plupart des solutions ci-dessus, je n'ai toujours pas réussi à résoudre ce problème. Quelqu'un peut-il m'aider à utiliser le contexte dans mon projet ?

SearchContext.jsx

import { createContext } from 'react'; const SearchContext = createContext(); export default SearchContext;

Search.jsx

import * as React from 'react'; import { useState, useContext } from 'react'; import Paper from '@mui/material/Paper'; import AccountCircleIcon from '@mui/icons-material/AccountCircle'; import SearchIcon from '@mui/icons-material/Search'; import { Box, IconButton, InputBase } from '@mui/material'; import SearchContext from '../Context/SearchContext'; export default function Search() { const [searchQuery, setSearchQuery] = useState(''); const handleSubmit = (event) => { event.preventDefault(); }; const handleInputChange = (event) => { setSearchQuery(event.target.value); }; return (              ); }

C'est ce que j'utilise. est ce bien ? Je l'ai ensuite utilisé ici

import React, { useContext, useEffect, useState } from 'react'; import { ApiService } from '../../API/ApiService'; import SearchContext from '../../Context/SearchContext'; function NumberOfContestParticipated({ handle }) { const [contestCount, setContestCount] = useState(null); const searchQuery = useContext(SearchContext); console.log(searchQuery); useEffect(() => { const fetchData = async () => { const ratingUrl = `https://codeforces.com/api/user.rating?handle=${handle}`; const ratingData = await ApiService(ratingUrl); if (ratingData && ratingData.status === 'OK') { setContestCount(ratingData.result.length); } else { setContestCount(0); } }; fetchData(); }, [handle]); return ( 
 {contestCount !== null ? ( 
Number of contests participated by {handle}: {contestCount}
 ) : ( 
Loading...
 )} 
 ); } export default NumberOfContestParticipated;

Mais lorsque je console le journal searchQuery, cela donne une valeur indéfinie. Qu'ai-je fait de mal?

Index.js

import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import SearchContext from './Context/SearchContext'; ReactDOM.render(    , document.getElementById('root') );