**Hello , i am novice with react. So i want to pass data through components . i want to send the NavBar.js "state" variable to the home.js "loca" variable. Is it possible and how to send?**

Here is the App.js file

```js
<Router>
    <div className="App">
        <NavBar></NavBar>
        <div className="component">
            <Switch>
                <Home></Home>
            </Switch>
        </div>
    </div>
</Router>

```

Here is the NavBar.js

```js
    const NavBar = () => {
        const [getState, setGetState] = useState('London');
        const [state, setState] = useState('London');

        const inputHandler = (event) => {
            setGetState(event.target.value);
          };

        const submitHandler = () => {
            setState(getState);
        };

        return ( 
            <nav className="navbar">
                <Link className="nlink" to="/">Weather Portal</Link>
                <div className="links d-block">
                    <div className="col-auto">
                    <input
                        type="text"
                        id="location-name"
                        className="form-control"
                        onChange={inputHandler}
                        value={getState} placeholder='Enter the location'
                    />
                    </div>
                    <button className="btn btn-primary mt-2" onClick={submitHandler}>
                        Search
                    </button>              
                </div>
            </nav>
         );
    }

```

Here is the Home.js

```js
    const Home = () => {

        const [data, setData] = useState(null);
        const loca = 'New York';

        useEffect(() => {
            const apiKey;
            const url = `http://api.openweathermap.org/data/2.5/weather?q=${loca}&units=imperial&appid=${apiKey}`;

            fetch(url)
        },[])

        return ( 
            <div className="home">
                { data && <WeatherData datas={data} loca={loca}></WeatherData> } 
            </div>

   );
}

```

I want to send the NavBar.js `state` variable to the `home.js` `loca` variable. Is it possible and how to send?