Как работать со слушателями событий в реакт?

Question

[Юрий Иванов]

Здравствуйте, помогите пожалуйста разобраться, учу третий день реакт, не могу разобраться, любая подсказка/намек/что гуглить
Есть код

function App() {
  const [userNickName, setUserNickName] = useState('');
  const [userProfile, setUserProfile] = useState('')
  const [repos, setRepos] = useState([])
  const [inputValue, setinputValue] = useState('')
  
  
  async function findUser() {
    setUserNickName(inputValue);
    let RespUserRepos = await (await axios.get('https://api.github.com/users/'+inputValue+'/repos')).data;
    let RespUser = await (await axios.get('https://api.github.com/users/'+inputValue)).data;
    setRepos(RespUserRepos);
    setUserProfile(RespUser)
  }
  
  return (
    <div>
      <Header>
        <button onClick={() => findUser()}>click me</button>
        <input  onChange={event => setinputValue(event.target.value)} />
      </Header>
      <Main>
        <Profile
          avatar={userProfile.avatar_url}
          name={userProfile.name}
          userNamel={userProfile.userName}
          followers={userProfile.followers}
          following={userProfile.following}
        />
        <ReposInfo title = {'Repositories'} reposNumber = {repos.length}>
        {repos.map((card) => <Card name={card.name} description={card.description} key = {card.name}/>)}
        </ReposInfo>
      </Main>
    </div>
  );      
}

я хочу инпут и кнопку вынести куда в отдельный компонент(но из компонента они не работают, потому что и функцию не видят и стейт, что понятно), я не знаю как это сделать и каким образом это сделать, что бы это было правильно
что в реакте является хорошей практикой в плане куда вот эти слушатели девать, в компонент, на страницу, немного запутался и каша в голове, подскажите пожалуйста

Answer 1

[n1ksON]

Создаете компонент Header и выносите туда инпут и кнопку. Header импортируете в App. В Header с помощью props передаете функцию findUser и setInputValue.
App.js

function App() {
  const [userNickName, setUserNickName] = useState('');
  const [userProfile, setUserProfile] = useState('')
  const [repos, setRepos] = useState([])
  const [inputValue, setinputValue] = useState('')
  
  
  async function findUser() {
    setUserNickName(inputValue);
    let RespUserRepos = await (await axios.get('https://api.github.com/users/'+inputValue+'/repos')).data;
    let RespUser = await (await axios.get('https://api.github.com/users/'+inputValue)).data;
    setRepos(RespUserRepos);
    setUserProfile(RespUser)
  }
  
  return (
    <div>
      <Header findUser={findUser} setInputValue={setInputValue} />
      <Main>
        <Profile
          avatar={userProfile.avatar_url}
          name={userProfile.name}
          userNamel={userProfile.userName}
          followers={userProfile.followers}
          following={userProfile.following}
        />
        <ReposInfo title = {'Repositories'} reposNumber = {repos.length}>
        {repos.map((card) => <Card name={card.name} description={card.description} key = {card.name}/>)}
        </ReposInfo>
      </Main>
    </div>
  );      
}

Header.js

const Header = ({ findUser, setInputValue }) => {
  return (
    <header>
      <button onClick={() => findUser()}>click me</button>
      <input  onChange={event => setinputValue(event.target.value)} />
    </header>
  )
}

Comments

[Юрий Иванов]

все понятно, спасибо огромное за помощь