Search Results Using Context

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

import { ResultProvider } from './pages/result-context';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <ResultProvider>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </ResultProvider>
);

result-context.js

import { createContext, useState } from "react";

const ResultContext = createContext([])

export const ResultProvider = ({ children }) => {
    const [getResult, setGetResult] = useState([])

    return (
        <ResultContext.Provider value={[getResult, setGetResult]}>
            {children}
        </ResultContext.Provider>
    )
}

export default ResultContext;

SearchBoxN.jsx

import React, { useContext } from 'react'
import { FaSearch } from 'react-icons/fa'
import axios from 'axios'
import { useState } from 'react'
import { useEffect } from 'react'
import { Link } from 'react-router-dom'
import ResultContext from '../../pages/result-context'


function SearchBoxN({searchBox}) {

    const [getSearch ,setGetSearch] = useState()
    const [getResult , setGetResult] = useContext(ResultContext)

    const search = async ()=>{
        const get = await axios.get(`https://api.themoviedb.org/3/search/multi?api_key=1b6ccfb407b0626e097c87368fba764e&language=en-US&query=${getSearch}&page=1&include_adult=false`)
        setGetResult(get.data.results)
        console.log(get)
    }

    
    const onClickSearch = ()=>{
        search()
    }
    console.log(getSearch);
    console.log(getResult)

  return (
    <div className={`type ${searchBox? 'openSearch' : 'closeSearch'}`}>
            <div className="inType">
                <div className="inTypeInput">
                    <input placeholder='search for a movie, tv show, person'className='input1' type='text' onChange={(e)=>{setGetSearch(e.target.value)}} value={getSearch}/>
                </div>
                <div className="inTypeIcon">
                    {/* <Link to={'/searchBoxResultsPage'} ><FaSearch className='inTypeIcon1' onClick={()=>{onClickSearch() ;setGetSearch('')}}/></Link> */}
                    <Link to={'/searchBoxResultsPage'} ><FaSearch className='inTypeIcon1' onClick={search}/></Link>
                    <button onClick={search}>Search</button>
                </div>
            </div>
        </div>
  )
}

export default SearchBoxN

SearchBoxResultsPage.jsx

import React, {useContext} from 'react'
import ResultContext from '../../pages/result-context'

function SearchBoxResultsPage() {

  const [getResult] = useContext(ResultContext)

  return (
    <div className='SBRP_main'>
      <h1>Results</h1>
      <ul>
        {getResult.map((result) => (
          <li key={result.id}>{result.title}</li>
        ))}
      </ul>
    </div>
  )
}

export default SearchBoxResultsPage