0

I'm trying to renther this conde but I have the net error:

Uncaught Error: Objects are not valid as a React child (found: object with keys {nombre, email}). If you meant to render a collection of children, use an array instead.

import React, {useState} from 'react';

const Ejemplo1 = () => {

    // VAlor inicial para contador
    const valorInicial = 0;
    //Valor inicial para una persona.
    const personaInicial = {
        nombre: 'Alex',
        email : 'Alex@elarcanazaret.org'
    }

    /**
     * Queremos que estas dos variables se vean en el html y que si se cambian se replique
     */
    const [contador, setcontador] = useState(valorInicial);
    const [persona, setpersona] = useState(personaInicial);
    /**
     * Funcion para actualizar el estado privado que tiene el contador. 
     */
    function incrementarContador() {
        // ?  funcionParaCambiar (nuevoValor)
        setcontador(contador + 1);
        
    }

    function actualiziarPersona() {
        setpersona(
            {
                nombre: 'Sergio',
                email: 'Sergio@gmail.com'
            }
        )
        
    }

    return (
        <div>
            <h1>Ejemplo de useState</h1>
            <h2>CONTADOR: {contador}</h2>
            <h3>Datos de la persona: {persona}</h3>
            <h4>Nombre  {persona.nombre} </h4>
            <h5>Email: {persona.email}</h5>
            <button onClick={incrementarContador}>Incrementar contador</button>
            <button onClick={actualiziarPersona}>Actualziar persona</button>

        
        </div>
    );
}

export default Ejemplo1;
mr rogers
  • 3,200
  • 1
  • 19
  • 31
Alexandre Belarte
  • 1
  • const [persona, setpersona] = useState(personaInicial); //here personalnicial is an object and inside useState you can't store objects . try to put a value instead of an object . – Rahul Mohanty Oct 09 '22 at 15:24
  • @RahulMohanty You can store anything you want with `useState`. This is a very misleading and factually incorrect comment. – Terry Oct 09 '22 at 15:26
  • @Terry , yes i am agree with your words . i just misconcepted about useState with objects . thank you for your words – Rahul Mohanty Oct 09 '22 at 15:28
  • `persona` is an object so you cannot use it in your template like this: `{persona}`. What are you trying to print into the template by doing that? – Terry Oct 09 '22 at 15:29

0 Answers0