Стейты и условный рендеринг тегов в 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>;
}

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