Skip to main content
adicionou 1201 caracteres ao conteúdo
Fonte Link
novic
  • 36,7mil
  • 4
  • 32
  • 70

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.

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.

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.

Fonte Link
novic
  • 36,7mil
  • 4
  • 32
  • 70

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.