Creating HTML tag in react component

Question

I'm not extending component class, trying to use usestate to manage state. Now I want to add a person component on certain conditions to personList variable inside the method togglePersonsHanler. I'm expecting a list of HTML tags to be added like

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

but on console log, I'm getting personList as below

{$$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}

and person tag is not getting added to DOM, any advice, please

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;

Drew Reese · Accepted Answer · 2020-03-22 06:13:47Z

2

You're mapping the object literals by using them as an html tag. You likely meant to use the imported Person component.

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

And to fix a react-key warning since all mapped elements need unique keys, add a key prop with a value that is unique to the data in the array, like name:

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

To correctly toggle the display of the "personList":

Conditionally render the mapped persons array if showPersonsState is true
Simplify showPersonsState state to simply be the boolean value
Use functional state update to correctly toggle showPersonsState from previous state

Updated component code

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>
  );
};

edited Mar 22, 2020 at 6:13

answered Mar 22, 2020 at 3:44

Drew Reese

207k19 gold badges280 silver badges292 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

upog Over a year ago

Thanks Drew. The view is not using the updated personList , how can i achieve to use updated personList. Note: I'm not extending the component class

Drew Reese Over a year ago

@upog personList isn't a state or prop value, so react doesn't consider it when the component needs to be rerendered. Are you simply trying to toggle viewing the personList (really personState.persons) when the button is clicked that toggler showPersonsState?

Collectives™ on Stack Overflow

Creating HTML tag in react component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related