Как наладить связь между двумя компонентами React?

Question

[atumbochka]

В App.js есть 2 компонента:

import React, {useEffect} from "react";

import "./App.css";

import Verification from "./components/Verification";
import Main from "./components/Main";

function App() {

  return (
    <div className="App">
      <Verification />
    </div>
  );
}

export default App;

Если сказать просто, то мне нужно, чтобы на страницу добавился компонент Main только при определённом условии, а именно, чтобы у Verification был display="none". Какие инструменты реакта нужно для этого использовать? Даже если я присоединю Main к Verification, а не прямо к App и сделаю пропс, который будет настраивать видимость элемента, то всё равно не понятно, как в принципе добавить элемент на страницу не в return-е, а по-другому

Answer 1

[wonderingpeanut]

лифтишь стейт, назовем его shouldDisplayMain в родительский компонент App, передаешь функцию изменения стейта в Verification компонент.

Внутри этого компонента сетишь shouldDisplayMain в то значение, которое тебе надо.

Внутри App делаешь {shouldDisplayMain && }