Нужен совет по JS-React

Frontend developer JavaScript
1

Всем привет. Такое дело. Решил написать приложение погоды на React. Захотелось сделать его прямо-таки компонентным. Чтобы каждая функция, была отдельным файлом JSX. Столкнулся с такой проблемой: Написал функцию, которая принемает введённые пользователем данные в поле ввода, но вот вопрос. Запихал это дело в state через useState, Но вот вопрос, как мне теперь юзать то, что я получил в других функциях. Я импортирую функцию, но вот как быть дальше - хз. Потому как, как принять это самое состояние, не имею понятия. (Да, я понимаю, что можно заюзать пропсы, но вот КАК ИМЕННО их юзать в данной ситуации - не знаю.)
Вот код функции.

import React from 'react';
import styled from 'styled-components';
import { useState } from 'react';


const Input = styled.input`
    background: transparent;
    color: #fff;
    &focus {
        outline: none;
    };
`;

const Button = styled.button`
    background: transparent;
    color: #fff;
    border: none;
`;

export default function GetInput(props) {
    let [city, setCity] = useState('')

    function getEvent(event) {
        setCity(event.target.value);
    };
    
    function click() {
        props.onClick(city);
    }

  return (
    <>
    <Input  value={city} 
            onChange={getEvent} 
            placeholder='Введите название города'
            />
   <Button onClick={click}>Найти город</Button> 


</>
  )
}