React 18: pasar datos con props

En React, utilizamos principalmente props para pasar datos a nuestros componentes.

En esta lección de nuestro curso completo y gratuito para principiantes sobre React 18, aprenderá cómo hacerlo.

Trabajar con software significa que tendrás que lidiar con datos. Tomará algunos datos de entrada, realizará algunos procesamientos y luego, opcionalmente, generará el resultado final.

En React, utilizamos principalmente props para pasar datos a nuestros componentes. La palabra props es básicamente un término más corto para propiedades. Los ha visto en acción en los últimos tutoriales, donde creamos componentes para mostrar información sobre países.

En este tutorial, nos centraremos en aprender sobre los props con más detalle. Este tutorial simplemente cubrirá los conceptos básicos y luego pasaremos a temas más avanzados más adelante en la serie.

Los props son como atributos

La forma más sencilla de entender los props es pensar en ellos como los atributos que se pueden pasar a los elementos HTML en el desarrollo web. Sin embargo, los props son mucho más avanzados.

Cualquier prop tendrá dos elementos. El primero es el nombre del prop, que es simplemente el nombre del atributo. El segundo es el valor del prop, que es el valor de ese atributo. Puede asignar tantos props a su componente como desee. Hay dos reglas que debes seguir al asignar un nombre a diferentes props.

1. El nombre del prop no puede ser una palabra clave reservada de JavaScript. Esto se debe a que el JSX que escribimos finalmente se convertirá a JavaScript y el uso de palabras clave reservadas arruinará las cosas. Es por eso que usamos className en lugar de class y htmlFor en lugar de for como nombres de props.
2. Los nombres de los props deben estar en camelCase.

Como dije antes, puedes pasar tantos props a un componente como quieras. Sin embargo, no es necesario que un componente utilice todos los props.

Puede pensar en pasar props a componentes como pasar parámetros a funciones. Los componentes son como funciones en ese sentido, y así como puedes pasar cualquier tipo de valor como parámetro a funciones, puedes pasar cualquier tipo de valor como prop.

/* let countryElement = ( 
<Country 
name="United States" 
capital="Washington, D.C." 
population="332 million" 
/> 
); */
let countryElement = Country({name: "United States", capital: "Washington D.C.", population: "332 million"});
let rootElement = document.getElementById("root");
ReactDOM.createRoot(rootElement).render(countryElement);

En el ejemplo anterior, reemplazamos el JSX de nuestro componente Country con una llamada de función a Country y almacenamos el resultado dentro de countryElement. Sin embargo, renderizar countryElement al final nos dio el mismo resultado.

Los props deben ser de sólo lectura

Se supone que un componente no debe modificar el valor de sus props. Las funciones o clases que definimos para crear nuestro componente deben mantener los props en modo de solo lectura. Este comportamiento se aplica cuando crea una aplicación React ejecutando el comando:

npx create-react-app your-app

En tales casos, el siguiente código le dará un error acerca de que el nombre es de solo lectura.

function Country(props) {
    props.name = "Australia";
    return (
      <div className="container">
        <h2 className="country-name">Country Name: {props.name}</h2> 
        <p className="population">Population: {props.population}</p> 
        <p className="area">Area: {props.area} km<sup>2</sup></p>
      </div> 
    );
}
export default Country;

Los props deben ser inmutables porque se supone que los componentes deben usarlos para obtener información de sus padres. Si realmente desea modificar alguna información en un componente, usar el state es su mejor opción. El state son básicamente datos que se mantienen dentro del componente, y React actualizará automáticamente el DOM en función de cualquier cambio en el state. Aprenderemos más sobre eso más adelante en la serie.

Tenga en cuenta que los datos en React fluyen de padre a hijo y así sucesivamente en la lista.

Conclusiones

Espero que ahora tengas una comprensión básica de los props en React. En tutoriales posteriores, analizaremos cómo validar props y proporcionarles valores predeterminados.

Puedes consultar el artículo original en: https://code.tutsplus.com/react-fundamentals-passing-data-with-props–cms-42019t