Reaccionar pasando div hasta los componentes

Reaccionar pasando div hasta los componentes

Soy completamente nuevo en React. He hecho los tutoriales pero como siempre leer y hacer son dos cosas separadas. Entonces, comencé una nueva aplicación desde cero y tropecé con el primer obstáculo.

Tengo un componente llamado AnswerBox y un componente llamado GetAnswerButton pero el html en GetAnswerButton no se muestra, por lo que asumo que no se pasa al componente AnswerBox. Solo se representa el html de AnswerBox. Entonces pregunta, ¿alguien podría señalar el error de mis formas?

 import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';


    class AnswerBox extends React.Component{

        render(){
            return(
                <GetAnswerButton />,
                <div className="answerBox"></div>
             )
        }
    }

    class GetAnswerButton extends React.Component {

        render() {
            return (
                <div>
                    <button>Click Me</button>
                </div>
            )
        }
    }

    ReactDOM.render(
        <AnswerBox />,
        document.getElementById('root')
    );

Aquí hay un lápiz de código que funciona (¡o no funciona!) Codepen

Mostrar la mejor respuesta

Encontrarás la respuesta en el enlace de arriba. Coloque GetAnswerButton /> y el div dentro de una matriz, envuélvalos en un div o use React.Fragment. Además, aunque no sea correcto, utilice <div className="answerBox" /> (etiqueta de cierre automático). Se considera una mejor práctica.

echa un vistazo a esta pregunta también

intente actualizar el código en la clase AnswerBox de la siguiente manera:

class AnswerBox extends React.Component{
  render(){
    return(
      <div>
        <GetAnswerButton />,
        <div className="answerBox"></div>
      </div>
    )
  }
}

Debería tener un error en la consola que dice que los elementos adyacentes deben envolverse en uno envolvente. O similar.

Gracias, sabía que era algo muy obvio que me estaba perdiendo.

¡Me alegro de haber ayudado!

class AnswerBox extends React.Component {

  render() {
    return (
     <div>
       <GetAnswerButton />
       <div className="answerBox"></div>
     <div>
    )
  }
}

envuelva su devolución dentro de AnswerBox con div o Fragment y funciona. o colóquelo dentro de [] porque regresa como una matriz.

Gracias, sabía que era algo muy obvio que me estaba perdiendo.

Encantado de ayudar. La mayoría de las veces es algo obvio, a veces solo necesitas salir a caminar durante 5 minutos y refrescar tu cerebro :)