how can i pass data from a function to another file in react with calling that component or use props

filename - Header.jsx

import { useEffect, useState } from 'react'
import { getValue } from './Input'
import TextField from '@mui/material/TextField';

export const Header = () => {
    const [search, setSearch] = useState('')
    useEffect(()=>{
        getValue(search,continents)
    },[search,continents])

<TextField id="outlined-basic" label="Outlined" variant="outlined" onChange={(e) => setSearch(e.target.value)} />`



filename - CountryData.jsx




let setVal = [];

export const getValue = (...val) => {
  setVal = val;
  return setVal;
};
export const CountryData = () => {
const [searchVal, setSearchVal] = useState('')
useEffect(() => {
        setSearchVal(setVal[0]);
      }, [setVal,getValue]);
}

i want to pass the data from input field from Header.jsx file to CountryData.jsx file without calling the component because i want to seperate the both header and CountryData element seperate in html. Maybe i am wrong in doing something. Please help and Thankyou

>Solution :

You can use useContext. Imagine it as a store for your app. In your Header component, you can set the data/value to that store. Then, in the CountryData component, you can retrieve the data from the store to use.