Error en ejercicio "Lista de tareas" React

Hola! Estoy haciendo este curso:

Y al llegar al ejercicio “Lista de tareas” (el enlace va directo a ese ejercicio) me aparece el siguiente error:

Captura de pantalla 2022-07-15 a las 9.25.11

Cuando acciono el botón de agregar tarea se añade el onClick antes del nombre de la tarea y además se añade al lado del icono de cerrar la tarea.

Al mismo tiempo aparece este error en la consola:


react_devtools_backend.js:4026 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

He seguido paso a paso el curso. Finalmente, para ver si el error se eliminaba he copiado directamente el código del repositorio de GitHub, pero el error persiste, por eso pienso que podría ser un error del curso, no mío.

¿A alguien más le ha pasado? Agradezco cualquier indicación para interpretar y solucionar el error. Muchas gracias.

I was not able to duplicate the error. I don’t think we can help you without seeing your code. Can you put your code in a github repo so we can see it? If not, you could cut and paste it here, just eh three component files, I think. You can format the code by putting three backticks on the line before and again on the line after.

I’m guessing that, like the error says, you didn’t refer to a component in the right way or didn’t return something properly. These types of errors are very common when learning React. I would guess that the problem is in Tarea.js.

1 Like

Thank you very much for your response. I put all the work in a Github repo: GitHub - aitormendez/tareas-fcc-exercise

Hope that’s help.

UPDATE. Sorry, In the repo seems not to be the last part of my code. Maybe I forgot to save it. Please, give me some time to fix it.

Fixed. All code is in the repo and it reproduces the error as described in the question. Sorry for the inconvenience.

1 Like

OK, there we go, in Tarea.js, you have:

    <div className={completada ? 'tarea-contenedor completada': 'tarea-contenedor'}>
      <div className="tarea-texto">
        onClick={() => completarTarea(id)}
        {texto}
      </div>
      <div className="tarea-icono">
        onClick={() => eliminarTarea(id)} 
        <AiOutlineCloseCircle className='tarea-icono' />
      </div>
    </div>

Notice that your two onClick attributes are in the wrong place. They should be inside the opening div, as an attribute of it, not contained in the div as a child of it. It should be a sibling to className, coming inside the <div ... >. So, this:

      <div className="tarea-texto">
        onClick={() => completarTarea(id)}

should be:

      <div 
        className="tarea-texto"
        onClick={() => completarTarea(id)}
      >

or however you want to format that - the important thing is that all the attribute/values come before the >.

You need to fix that in two places in this file and then the app works.

Yeah, like I said, these are very common mistakes to make when you’re learning React. Don’t let it discourage you. React is weird and difficult at first, but it is also really cool and powerful once you get the hang of it.

What a mistake! Of course onClick listener should be an attribute of element.

Now all is working fine. Thank you so much. :pray:

1 Like