title: I am trying to use useContext to give access of the api data from one component to other but i am failing to do so
body: <p>I created a component in which i requested the data from rapid api. After that i got the coin summary in <code>coinRanking</code> after that i am trying to pass data in homePage but i couldn't. Please help me with sharing data using useContext.</p>
  <pre><code>import React, { useState } from 'react'
  import { useQuery } from &quot;react-query&quot;
  import axios from 'axios'
  import { createContext } from 'react';
  import HomePage from '../Pages/HomePage';
  
  const options = {
    method: 'GET',
    url: 'https://coinranking1.p.rapidapi.com/coins',
    params: {
      referenceCurrencyUuid: 'yhjMzLPhuIDl',
      timePeriod: '24h',
      'tiers[0]': '1',
      orderBy: 'marketCap',
      orderDirection: 'desc',
      limit: '50',
      offset: '0'
    },
    headers: {
      'X-RapidAPI-Key': 'ea3e0e9305msh25681129077648ep1f06f9jsnb2ee8da018dc',
      'X-RapidAPI-Host': 'coinranking1.p.rapidapi.com'
    }
  };
  
  const DataContext = createContext({coinRanking}) // i don't know what to pass over here.
  
  function QueryData({children}) {
    const getData = axios.request(options)
    const {data, isLoading, isError, error, isFetching} = useQuery(&quot;getData&quot;, ()=&gt;getData,{})
    
    if (isLoading){
      console.log(&quot;Loading&quot;);
      return &lt;p&gt;Loading&lt;/p&gt;
    } else if (isError){
      console.log(&quot;error&quot;);
      return &lt;p&gt;{error}&lt;/p&gt;
    }
  
    const coinRanking= data?.data?.data.stats
  
    return (
      &lt;div&gt;
        &lt;DataContext.Provider value={{coinRanking}}&gt; //i am trying to pass coinRanking in Homepage
          &lt;HomePage/&gt;
        &lt;/DataContext.Provider&gt;
      &lt;/div&gt;
    )
  }
  
  export default DataContext
  </code></pre>