Accediendo a las props en un Componente Funcional de React

En React, las propiedades o props, son la forma que tenemos de pasar datos entre componentes. La pregunta se enfoca en cómo podemos acceder a una propiedad específica, en este caso 'username', dentro de un componente funcional.

La respuesta correcta es props.username.

Las propiedades se pasan a un componente funcional como argumento, en este caso, props. No necesitamos usar this.props en componentes funcionales, esa sintaxis es usada en componentes de clase. Vamos ilustrar este punto con un ejemplo:

const MyComponent = (props) => {
  return (
    <div>
      {props.username}
    </div>
  )
}

// Usando MyComponent y pasando 'username' como prop
<MyComponent username='Carlos' />

En este ejemplo, el valor 'Carlos' que se pasa como username será renderizado en el componente MyComponent.

Recuerda, en React, las props son de solo lectura. Eso significa que no puedes modificar directamente una prop dentro de un componente. React se encarga de manejar el flujo de datos y garantizar que se está respetando esta regla.

Además, es una buena práctica tratar a las props como si fueran argumentos de una función pura en JavaScript, es decir, la función no debe modificar directamente los argumentos recibidos.

Finalmente, estarás tentado a acceder a una prop directamente por su nombre username, pero esto dará un error si no defines username antes en tu componente. Por tanto, siempre accede a las props mediante su objeto contenedor: props.username.

React es una librería muy poderosa para la creación de interfaces de usuario y manejar correctamente las props es crucial para crear aplicaciones robustas y escalables.