En las otras lecciones viste que podes pasarle atributos a un componente para que despues renderizarlo. Recordemos el ejemplo de las TwitterCards

export function TwitterFollowCard({username, name, isFollowing}){
    return(
        <article className="tw-followCard">
        <header className="tw-followCard-header">
            <img 
            className="tw-followCard-avatar"
            src={`https://unavatar.io/${username}`}
            alt="Avatar del usuario" 
            />
            <div className="tw-followCard-info">
                <strong>{name}</strong>
                <p>{username}</p>
            </div>
        </header>
        <aside>
            <button className="tw-followCard-button">Seguir</button>
        </aside>
    </article>
    )
}

Genial. Esto funciona. Pero existe una propiedad que a veces puede sernos muy util: la propiedad children. Imaginemosnos que cuando renderizamos los botones lo tenemos asi

export function App(){
    const formatUsername=(username)=>`@${username}`;
    return(
    <>
        <TwitterFollowCard formatUsername={formatUsername} isFollowing username="alejoevilches">
          Alejo Vilches
        </TwitterFollowCard>
        <TwitterFollowCard formatUsername={formatUsername} isFollowing username="goncy"/>
					Gonzalo Pozzo
				</TwitterFollowCard>
        <TwitterFollowCard formatUsername={formatUsername} isFollowing username="midudev"/>
					Miguel Angel Duran
				</TwitterFollowCard>
      </>
    )
}

No le pasamos como atributo ningun name, sino que lo escribimos debajo. Cuando lo rendericemos, esto va a funcionar pero no va a mostrar ningun nombre ya que no le pasamos ningun nombre para mostrar como parametro. Sin embargo, podemos recuperarlo con la propiedad children.

export function TwitterFollowCard({username, children, isFollowing}){
    return(
        <article className="tw-followCard">
        <header className="tw-followCard-header">
            <img 
            className="tw-followCard-avatar"
            src={`https://unavatar.io/${username}`}
            alt="Avatar del usuario" 
            />
            <div className="tw-followCard-info">
                <strong>{children}</strong>
                <p>{username}</p>
            </div>
        </header>
        <aside>
            <button className="tw-followCard-button">Seguir</button>
        </aside>
    </article>
    )
}

Ahora, la funcion entendera que todos los hijos de ese elemento seran el valor que nosotros estamos buscando. Por eso, cuando rendericemos esto nos aparecera el nombre que diga cada uno como valor de children.

Lo interesante de la propiedad children es que podes agregarle texto, elementos o inclusive otros componentes!