0

Tengo este componente en react:

import react from "react";

function TodoList(props) {
  return (
    <section>
      <ul>{props.children}</ul>
    </section>
  );
}

Comprendo que {props.children} me devuelve lo que está contenido en {props.children}. Ahora mi pregunta es ¿por qué a TodoList se le pasa el parámetro de props y quién se las envía? ¿Es necesario pasar a TodoList el parámetro de props, si en react cuando una "etiqueta" está abierta y luego cerrada ya genera la propiedad children por defecto, solo llamándola entre llaves ya retorna el dato que contenga...? ¿Es realmente necesario pasarle a TodoList el parámetro de props? Estoy un poco confundido...

1
  • Todo eso sucede dentro del render interno de react. entonces esa propiedad se la pasa react. Es necesario usar props para poder llamar a children dado que ahí fue almacenada. Si tienes más dudas, creo que debe ser más específico, ya que tus dudas son un poco generales.
    – Sr1871
    el 23 oct. 2022 a las 11:10

1 respuesta 1

1

En teoría general, cada componente de React es una función que recibe datos de entrada a los que se les conoce como props y dicha función retorna elementos de react que basicamente van a describir lo que debería aparecer en la pantalla

Básicamente estas props son la colección de datos que un componente recibe

  • De quien? -> del contenedor padre
  • Para que? -> Para ser usado para definir los elementos que retornara el componente

Ejemplo de un caso de uso de tu componente

export default function App() {
  return (
    <div>
      <TodoList>Hello</TodoList>
    </div>
  );
}

En el codigo de arriba es App el componente padre y TodoList el componente Hijo por ende el padre pasa las propiedad a su hijo.

  • El componente Hijo necesita declarar props para acceder a dichas propiedad.

En respuesta a tu pregunta:

Si en react cuando una "etiqueta" esta abierta y luego cerrada ya genera la propiedad chidren por defecto

La propiedad children vive en los datos que se pasan en el objeto props, no accedes a ellos de manera mágica solo llamándolos directamente en tu componente hijo

<TodoList>Hello</TodoList>

{children: "Hello"}
children: "Hello"
<prototype>: Object

Una etiqueta abierta y una cerrada sin nada dentro de ella no genera una propiedad children:

<TodoList></TodoList>

{}
<prototype>: Object

El parámetro props es obligatorio?

No, mientras tu componente no necesite algunas de las propiedad contenidas en dicho objetos.

Ejemplo

function TodoList() {
  return (
    <section>
      <ul>Hello</ul>
    </section>
  );
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.