Стейты и условный рендеринг тегов в React

Пусть у нас есть следующий код:

function App() { const [visible, setVisible] = useState(false); return <div> </div>; }

Давайте сделаем так, некий абзац показывался, если стейт visible имеет значение true, и не показывался - если false:

function App() { const [visible, setVisible] = useState(false); let elem; if (visible) { elem = <p>text</p>; } return <div> {elem} </div>; }

Давайте теперь добавим кнопку для показа абзаца:

function App() { const [visible, setVisible] = useState(false); let elem; if (visible) { elem = <p>text</p>; } return <div> <button onClick={() => setVisible(true)}>btn</button> {elem} </div>; }

А теперь сделаем так, чтобы нажатие на кнопку то показывало, то скрывало абзац:

function App() { const [visible, setVisible] = useState(false); let elem; if (visible) { elem = <p>text</p>; } return <div> <button onClick={() => setVisible(!visible)}>btn</button> {elem} </div>; }

А теперь сделаем так, чтобы надпись на кнопке соответствовала тому, что кнопка будет делать. Если она будет скрывать абзац, напишем hide, а если показывать - show:

function App() { const [visible, setVisible] = useState(false); let elem; if (visible) { elem = <p>text</p>; } return <div> <button onClick={() => setVisible(!visible)}> {visible ? 'hide' : 'show'} </button> {elem} </div>; }

Пусть у вас есть три абзаца. Сделайте три кнопки, каждая из которых будет отвечать за показ определенного абзаца.