Get fetched data in another component

import { useQuery } from '@tanstack/react-query'
import axios from 'axios'

const GITHUB_URL = import.meta.env.VITE_GITHUB_URL
const GITHUB_TOKEN = import.meta.env.VITE_GITHUB_TOKEN

export const useSearchUsers = (query) => {
  return useQuery({
    queryKey: ['users', { query }],
    queryFn: async () => {
      const response = await axios.get(
        `${GITHUB_URL}/search/users?q=${query}`,
        {
          headers: {
            Authorization: `token ${GITHUB_TOKEN}`
          }
        }
      )
      return response.data
    },
    enabled: !!query
  })
}

import { useState } from 'react'
import { useSearchUsers } from '../../hooks/useGithubUsers'

const UserSearch = () => {
  const [text, setText] = useState('')
  const [query, setQuery] = useState('')

  const { data } = useSearchUsers(query)

  const handleChange = (e) => setText(e.target.value)

  const handleSubmit = (e) => {
    e.preventDefault()

    if (text === '') {
      alert('Please enter something')
    } else {
      setQuery(text)
      setText('')
    }
  }

  return (
    <div className='grid grid-cols-1 xl:grid-cols-2 lg:grid-cols-2 md:grid-cols-2 mb-8 gap-8'>
      <div>
        <form onSubmit={handleSubmit}>
          <div className='form-control'>
            <div className='relative'>
              <input
                type='text'
                className='w-full pr-40 bg-gray-200 input input-lg text-black'
                placeholder='Search'
                value={text}
                onChange={handleChange}
              />
              <button
                type='submit'
                className='absolute top-0 right-0 rounded-l-none w-36 btn btn-lg'
              >
                Go
              </button>
            </div>
          </div>
        </form>
      </div>
      {data?.items.length > 0 && (
        <div>
          <button className='btn btn-ghost btn-lg'>Clear</button>
        </div>
      )}
    </div>
  )
}

export default UserSearch

import UserItem from './UserItem'
import Spinner from '../layout/Spinner'

import { useSearchUsers } from '../../hooks/useGithubUsers'
const UserResults = () => {
  const { data, isPending } = useSearchUsers()

  return (
    <div className='grid grid-cols-1 gap-8 xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2'>
      {!isPending ? (
        data?.items.map((user) => <UserItem key={user.id} user={user} />)
      ) : (
        <Spinner />
      )}
    </div>
  )
}

export default UserResults