Seguinte, você faz cada estado separado, se você tem uma lista de valores e tem um valor verdadeiro/falso são dados separados, talvez relacionados, mas, faça separado por vários motivos, um é organização, outro manipulação dessas informações se torna mais simples cada um no seu próprio estado, para exibição nem se fala é muito mais fácil separar os dados.
Seu código é melhor assim:
function App() {
const [persons, setPersons] = React.useState([
{name: 'Max', age: 28 },
{name: 'Eddie', age: 20 },
{name: 'Julie', age: 25 }
]);
const [show, setShow] = React.useState(false);
return (
<div>
<ul>
{ show && persons.map((person, i) => (
<li key={i}>{person.name} - {person.age}</li>
)
)
}
</ul>
<button onClick={e => setShow(!show)}>
{show ? 'Esconder' : 'Mostrar'}
</button>
</div>
)
}
ReactDOM.render( <App/> , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>
No código eu reforço que os estados do componente devem ser sempre separados.
- Introdução aos Hooks
- React v16.8: O React com Hooks
- Hooks de forma resumida
- Usando o State do Hook
- Usando Effect Hook (Hook de Efeito)
- Regras dos Hooks
- Criando seus próprios Hooks
- API de Referência dos Hooks
- Hooks FAQ