Una vez conocemos más de una herramienta de programación, podemos crear distintos elementos que nos faciliten el desarrollo de nuestros proyectos. Crear estos elementos es una forma de personalizar nuestro código y simplificar nuestras acciones. Una forma de crear este tipo de elementos es sustituir los elementos existentes por nuestros propios elementos personalizados. En este post, te enseñaremos a crear un sustituto de input en React para personalizar tu código.
¿Qué es un sustituto de input en React?
Cuando hablamos de crear un sustituto de input en React, nos referimos a maquetar un componente React que pueda reemplazar el elemento HTML input. La ventaja de usar esta estrategia es que podemos crear un objeto que se comporte igual que el input, pero que también tenga sus propias propiedades. Es decir, que las props que le pasamos al input, como type, name, value, className y onChange, también pueden ser pasadas al sustituto. La diferencia es que podemos pasarle nuevas propiedades que nos ayuden a configurar aún más nuestra entrada de datos.
A continuación, te enseñamos cómo crear un sustituto de input en React.
¿Cómo crear un sustituto de input en React?
Para enseñarte cómo crear un sustituto de input en React, usaremos de ejemplo los input que hemos creado en nuestro post sobre crear una página de login en React. Allí, hemos creado un formulario con dos input: uno de usuario y otro de contraseña. A cada uno le hemos pasado la propiedad type:text y una propiedad name que representa cada input. Ahora, queremos agregarle a estas casillas de datos una descripción del dato que queremos por parte del usuario. Para ello, podemos agregarle una nueva propiedad a nuestro input. Sin embargo, como input no tiene una propiedad para ello, podemos crear un sustituto de input en React.
En nuestro caso, llamaremos a este sustituto con la etiqueta <FormField/>. A este sustituto de input en React le añadiremos la propiedad label, en donde podremos insertar la descripción del input. Entonces, para crear un sustituto de input en React, debes crear un componente con el nombre que desees. Desde Keepcoding, siempre te recomendamos crear este tipo de componentes en un archivo diferente. Esta estrategia de creación de módulos te permite mantener un código más ordenado y simple de leer.
Nosotros hemos creado un archivo llamado FormField.js, en donde creamos el componente FormField en estilo de función. ¿Qué contiene este componente? Pues tiene un div con una determinada clase. Dentro de este div, hemos creado un label con una clase que, a su vez, tiene dentro un span. Este span albergará el texto label. Es decir, el valor que le pasemos a la prop label será recogida por este span.
Luego, hemos insertado dentro del componente formField el elemento input con una propiedad className y una propiedad autoComplete con el valor off. Dentro de este componente también hemos pasado el objeto props, que contiene todas las propiedades de objeto.
import classNames from ‘classnames’;
import ‘./FormField.css’
function FormField ({className, label, …props}) {
return (
<div className={classNames (‘formField’, className)}>
<label className= “formField-label”>
<span> {label} </span>
<input
className=”formField-input”
autoComplete=“off”
{…props}
></input>
</label>
</div>
);
}
export default FormField;
Como puedes ver en las líneas de código anteriores, hemos definido por medio del destructuring de componentes en React que todas las propiedades que no sean className y label estarán recogidas en el objeto props. Este es el objeto que le pasamos a la etiqueta input, porque la idea de nuestro componente FormField es que se comporte de una manera muy similar a input. Entonces, por ejemplo, la propiedad type estará recogida dentro de la etiqueta input, pero podrá accederse por FormField.
Una vez que hemos podido crear un sustituto de input en React, podemos utilizarlo en otros componentes para crear nuestros input personalizados. A continuación, puedes ver un ejemplo de cómo usamos este nuevo elemento:
<FormField
type = “text”
name= “username”
label= “phone, email, or username”
className= “loginForm-field”
value= {username}
onChange= {handlechange}
/>
<FormField
type = “text”
name= “password”
label= “password”
className= “loginForm-field”
value= {password}
onChange= {handlechange}
/>
¿Cuál es el siguiente paso?
Ahora que sabes exactamente cómo crear un sustituto de input en React, ¡es momento de utilizarlo para crear elementos complejos en tu propia aplicación! Para lograrlo, te invitamos a nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva en el que aprenderás a crear todo tipo de proyectos de programación para la web con lenguajes como JavaScript, JSX, HTML y CSS. ¿A qué esperas para dar el siguiente paso en tu aprendizaje? ¡Matricúlate ya y triunfa en el sector IT!
