javascript - Reaccionar hijo (encontrado: objeto con claves {}) no ganó, no renderizó el archivo

Sigue recibiendo un error al intentar exportar ID:

Error: Los objetos no son válidos como hijo de React (encontrado: objeto con claves {}). Si quisieras renderice una colección de elementos secundarios, utilice una matriz en su lugar.

>  8 |     )
>  9 |   }
> 10 | 
> 11 | ReactDOM.render(<Ids />, document.getElementById("root"))
> 12 | export default Ids

ampliado:

  156 | }
  157 | 
  158 | _c = Ids;
> 159 | react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.render( /*#__PURE__*/Object(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_2__["jsxDEV"])(Ids, {}, void 0, false, {
      |                                                  ^  160 |   fileName: _jsxFileName,
  161 |   lineNumber: 11,
  162 |   columnNumber: 17

Este es mi index.js:

import ReactDOM from 'react-dom';
import Tester from "./Tester.js"

ReactDOM.render(<Tester />, document.getElementById("root"))

Esta es mi Apps.js:

import React from 'react';
import ReactDOM from 'react-dom';

function Apps(name) {

    return( <h1>Hello, {name}</h1>

    )
  }
  
ReactDOM.render(<Apps />, document.getElementById("root"))
export default Apps

Este es mi Ids.js:

import React from 'react';
import ReactDOM from 'react-dom';

function Ids(id) {

    return( <h1>id = {id}</h1>

    )
  }

ReactDOM.render(<Ids />, document.getElementById("root"))
export default Ids

Este es mi Tester.js:

import React from 'react';
import ReactDOM from 'react-dom';
import Ids from './Ids.js';
import Apps from './Apps.js';

function Tester(){
    const Apps = "Jenny"
    const Ids = 2

    return(
    <div>
        <Apps />
        <Ids />
    </div>
    )
}

ReactDOM.render(
<Tester
    name ={Apps.name}
    id ={Ids.id}
/>,
document.getElementById("root")
)
export default Tester

¡Gracias! Si no es un error de sintaxis, envíeme sugerencias, ya que quiero descubrir el error por mi cuenta, pero tengo dificultades para encontrarlo ya que no tiene errores para Apps.js pero tiene errores para Ids.js

Creo que su variable Ids y su componente Ids chocarán.

-keysl

27/03/2021 a las 16:06

------------------------------------

Debe haber solo un ReactDom.render

Componente React basado en estructura de árbol:

  const Apps = "Jenny"
  const Ids = 2

<Tester
    name ={Apps.name}
    id ={Ids.id}
/>,

No puedes pasar Apps.name, porque se trata de una cadena, no de un objeto; lo mismo ocurre con los ID.

Cambiar a:

<Tester
    name ={Apps}
    id ={Ids}
/>,

o:

const Apps = {
  name: 'Jenny'
}
        
const Ids = {
  id: 2
}

3

1

¡Gracias! No sabía sobre ReactDom y el paso de cadenas

- Paige

27/03/2021 a las 16:25

Aunque ya no tengo errores, no imprime ninguno de los valores de mi Probador... Mi Probador está configurado así: function Tester(){ const Apps = ''Jenny" return (<div> <Aplicaciones /></div>)}. y el renderizado es: <Nombre del probador = {Apps}

- Paige

27/03/2021 a las 17:12

Solo vea Cómo pasar e imprimir componentes. Puede usarlos para desestructurarlos o pasarlos por accesorios

– Piotr Żak

27/03/2021 a las 17:13

------------------------------------

Debes usar ReactDOM.render solo una vez (para el elemento raíz).

Entonces necesitas leer la documentación para ver cómo pasar propiedades a un componente de reacción.

la función Apps(nombre){...} no funcionará, deberías escribir:

Aplicaciones de función (accesorios){ // usa props.name para obtener la propiedad de nombre } function Apps({nombre}) { // usa la propiedad de nombre }

Básicamente, debes tener

index.js

import ReactDOM from 'react-dom';
import Tester from "./Tester.js"

ReactDOM.render(<Tester />, document.getElementById("root"))

Probador.js

import React from 'react';
import Ids from './Ids.js';
import Apps from './Apps.js';

function Tester(props){
    return(
      <div>
        <Apps name={props.name}/>
        <Ids id={props.id}/>
      </div>
    )
}

export default Tester

Aplicaciones.js

import React from 'react';

function Apps(props) {
    return <h1>Hello, {props.name}</h1>
}
  
export default Apps

Ids.js

import React from 'react';

function Ids({id}) {
  return <h1>id = {id}</h1>
}

export default Ids