¿Cómo puedo generar HTML por función y hacerla más adelante en JS Reaccionar

Nicholas Mrózek:

Estoy strugling con la generación de la tabla periódica en HTML a partir de la información dada en this.periodicTable[]y que lo hacen más tarde, como se puede ver en el código de abajo. ¿Cómo puedo hacer que funcione? En primer lugar he hecho a mano (todo en la sección render () escrito en HTML), pero más tarde descubrí que la generación que sería mejor idea. Todo funcionó hasta que me cambié a generar html Istead de escritura él. También me gusta usar los datos PeriodicTable en otras partes del sitio web por lo que es necesario éste

Reaccionar importar la materia

class PeriodicTable extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            show: true,
        };
        this.periodicTable = [
            //    1 row
            this.hydrogen = {
                blank: false,
                name: "hydrogen",
                short: "H",
                z: 1,
                mass: 1.006,
            },
            this.blank = {
                blank: true
            },
            this.blank = {
                blank: true
            },
            this.blank = {
                blank:true
            },
            this.blank = {
                blank: true
            },
            this.blank = {
                blank: true
            },
            this.blank = {
                blank: true
            },
            this.blank = {
                blank: true
            },
            this.blank = {
                blank: true
            },
            this.blank = {
                blank: true
            },
            this.blank = {
                blank: true
            },
            this.blank = {
                blank: true
            },
            this.blank = {
                blank: true
            },
            this.blank = {
                blank: true
            },
            this.blank = {
                blank: true
            },
            this.blank = {
                blank: true
            },
            this.blank = {
                blank: true
            },
            this.hellium = {
                blank: false,
                name: "hellium",
                short: "He",
                z: 2,
                mass: 4.0026,
            },
            //    2 row
        ]
        this.output = "";
    }

    generatePeriodicTable = () =>{
        for(let i = 0; i < this.periodicTable.length; i++){
            if(this.periodicTable[i].blank){
                this.output += <div class = "periodicCard" class="blank"></div>;
            }else{
                this.output +=
                <div class="periodicCard">
                    <sup class="periodicZ">{this.periodicTable[i].z}</sup>
                    <div class='center'>
                        <strong class="periodicElement">{this.periodicTable[i].short}</strong>
                    </div>
                    <div class='center'>
                        <p class="periodicMass">{this.periodicTable[i].mass}</p>  
                     </div>
                </div>;
            }
        }
        return this.output;
    }

    showLearnItPage = () =>{
        this.setState({show: false});
    }

    render(){
        if(this.state.show){
            return(
                <div>
                    <h2>Periodic<sup class="sup">table</sup></h2>
                    <main class="biggrid">
                        {this.generatePeriodicTable}{this.output}
                    </main>
                    <div class='center'>
                        <button class='periodic-table-page-button' onClick={this.showLearnItPage}>Back</button>
                    </div>
                </div>
            );
        }else{
           return( <LearnItPage /> );
        }
    }
}

export default PeriodicTable;```

Gabriel Carneiro:

Ok, así que fijo su código y que voy a comentar todo lo que hice.

// periodicTable doesn't need to be part of the PeriodicTable Component, Juan Marco has made a good sugestion to stract it to a JSON
// for now I'll just put it in a variable outside PeriodicTable
const periodicTable = [
  //    1 row
  {
      blank: false,
      name: "hydrogen",
      short: "H",
      z: 1,
      mass: 1.006,
  },
  {
      blank: true
  },
  {
      blank: true
  },
  {
      blank:true
  },
  {
      blank: true
  },
  {
      blank: true
  },
  {
      blank: true
  },
  {
      blank: true
  },
  {
      blank: true
  },
  {
      blank: true
  },
  {
      blank: true
  },
  {
      blank: true
  },
  {
      blank: true
  },
  {
      blank: true
  },
  {
      blank: true
  },
  {
      blank: true
  },
  {
      blank: true
  },
  {
      blank: false,
      name: "hellium",
      short: "He",
      z: 2,
      mass: 4.0026,
  },
  //    2 row
];

// I've created a new Component that will handle the elements rendering, it's just a Function Component
function TableElement(props) {
  const { elementData } = props;
  const { blank, z, short, mass } = elementData;

  if (blank) return <div className="periodicCard blank" />; // take note that in JSX files, HTML classes are className

  return (
    <div className="periodicCard">
        <sup className="periodicZ">{z}</sup>
        <div className='center'>
            <strong className="periodicElement">{short}</strong>
        </div>
        <div className='center'>
            <p className="periodicMass">{mass}</p>  
        </div>
    </div>
  );
}

class PeriodicTable extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            show: true,
        };
    }

    // React knows how to handle arrays of ReactComponents, but you must put a key in each element of the array
    generatePeriodicTable = () => {
      return periodicTable.map((el, i) => <TableElement elementData={el} key={i} />);
    }

    showLearnItPage = () => {
        this.setState({ show: false });
    }

    render() {
        if(this.state.show) {
            return (
                <div>
                    <h2>Periodic<sup className="sup">table</sup></h2>
                    <main className="biggrid">
                        {this.generatePeriodicTable()}
                    </main>
                    <div className='center'>
                        <button className='periodic-table-page-button' onClick={this.showLearnItPage}>Back</button>
                    </div>
                </div>
            );
        }
        // after an if with a return you don't need to use else
        return <LearnItPage />;
    }
}

export default PeriodicTable;

Ahora todo debería funcionar como se pretendía. Tómese su tiempo para leer el Reaccionar Tutorial .