Создание тега HTML в компоненте реакции

Question

Я не расширяю класс компонентов, пытаюсь использовать usestate для управления состоянием. Теперь я хочу добавить компонент person при определенных условиях к переменной personList внутри метода togglePersonsHanler. Я ожидаю, что список HTML тегов будет добавлен как

<person name="person1" age=31>
<person name="person2" age=26>
<person name="person3" age=35>

, но в журнале консоли я получаю personList, как показано ниже

{$$typeof: Symbol(react.element), type: "div", key: null, ref: null, props: {…}, …}$$typeof: Symbol(react.element)type: "div"key: nullref: nullprops: {children: Array(3)}_owner: null_store: {validated: false}_self: null_source: {fileName: "D:\data\react\my-app\src\App.js", lineNumber: 72, columnNumber: 7}

и тег person не добавляется в DOM, любые советы, пожалуйста

import React, { useState } from 'react';
import './App.css';
import Person from './Person/Person';

const App = props => {    
  const [personState, setPersonState] = useState({
    persons: [
      {name: "person1", age:31},
      {name: "person2", age:26},
      {name: "person3", age:25}
    ],
    other: "some Other Value"

  } );

  const [otherState,setOtherState]=useState({otherState :'some other value'});
  const [showPersonsState,setShowPersonsState]=useState({showPersons :false});

    let personList=null;
    const togglePersonsHanler =() =>{
      personList=null;
      setShowPersonsState(
        {showPersons : !showPersonsState.showPersons}
      )
      console.log(showPersonsState.showPersons);
      if(showPersonsState.showPersons){
        personList=(
      <div>{personState.persons.map (person =>{
        return <person name={person.name} age={person.age}/>
      }
      )}</div>

        );
      }
      console.log(personList);
    }

  return (
    <div className="App">
      <h1> HI, I'm the react app</h1>
      <button 
      //onClick={switchNameHandler.bind(this,'Gopu Ravi')} 
      onClick={togglePersonsHanler}
      style={style}> Toggle Person </button>
      { personList }

    </div>
  );
}

export default App;

Answer 1

Вы отображаете литералы объекта, используя их как и тег html. Скорее всего, вы хотели использовать импортированный компонент Person.

<div>
  {personState.persons.map (person => (
    <Person name={person.name} age={person.age}/>
  )}
</div>

И чтобы исправить предупреждение о реагирующем ключе, поскольку все сопоставленные элементы нуждаются в уникальных ключах, добавьте ключевую опору со значением, уникальным для данных. в массиве, например name:

<div>
  {personState.persons.map (person => (
    <Person key={name} name={person.name} age={person.age}/>
  )}
</div>

Чтобы правильно переключить отображение «personList»:

1. Условно отобразить сопоставленный массив persons, если showPersonsState равно true
2. Упростить showPersonsState состояние, чтобы просто быть логическим значением
3. Использовать обновление функционального состояния для правильного переключения showPersonsState из предыдущего состояния

Обновленный код компонента

const App = props => {
  const [personState, setPersonState] = useState({
    persons: [
      { name: "person1", age: 31 },
      { name: "person2", age: 26 },
      { name: "person3", age: 25 }
    ],
    other: "some Other Value"
  });

  const [otherState, setOtherState] = useState({
    otherState: "some other value"
  });
  const [showPersonsState, setShowPersonsState] = useState(false);

  const togglePersonsHandler = () => setShowPersonsState(show => !show);

  return (
    <div className="App">
      <h1> HI, I'm the react app</h1>
      <button onClick={togglePersonsHandler}>Toggle Person</button>
      {showPersonsState &&
        personState.persons.map(({ age, name }) => (
          <Person key={`${name}`} name={name} age={age} />
        ))}
    </div>
  );
};