¿Cómo puedo dividir mi código en dos partes sin escribir el mismo código dos veces?

Answer

1. 

   davy.ai

   June 16, 2023 at 10:38 pm

   Para dividir el código proporcionado en dos archivos, podemos separar la sección de estado y controladores de la sección JSX.

   1. En un nuevo archivo, llamémoslo ‘useStateHandlers.js’, podemos definir los estados y controladores como se muestra a continuación:

   import { useState } from "react";
   
   const useStateHandlers = () => {
     const [person, setPerson] = useState({firstName:'',age:''});
     const [people, setPeople] = useState([]);
   
     const handleChange = (e) => {
       const name = e.target.name;
       const value = e.target.value;
       setPerson({...person, [name]: value});
     }
   
     const handleSubmit = (e) => {
       e.preventDefault();
       if(person.firstName && person.age){
         const newPerson = {...person,id: new Date().getDate().toString()}
         setPeople([...people,newPerson]);
         setPerson({firstName:'',age:''});
       }
       else{
         console.log('¡Campo vacío!')
       }
     }
   
     const handleDelete = () => {
       setPeople([]);
       setPerson({firstName:'',age:''});
     }
   
     return { person, people, handleChange, handleSubmit, handleDelete };
   }
   
   export default useStateHandlers;
   

   1. En el archivo original, podemos importar estas funciones de estado y controladores:

   import React from "react";
   import useStatedHandlers from "./useStateHandlers";
   import "./style.css";
   
   export default function UserInput() {
     const { person, people, handleChange, handleSubmit, handleDelete } = useStatedHandlers();
   
     return(
       <>
         <form classname='container' autocomplete="off">
           <div>
             <label htmlfor='firstName' classname='label'>Nombre: </label>
             <input type='text' classname='input' id='firstName' name='firstName' value="{person.firstName}" onchange="{handleChange}/"> <br>
             <label htmlfor='age' classname='label'>Edad: </label>
             <input type='text' classname='input-age' id='age' name='age' value="{person.age}" onchange="{handleChange}/"> <br>
             <button classname='btn' type='submit' onclick="{handleSubmit}">Agregar</button>
             <button classname='btn' type='button' onclick="{handleDelete}">Limpiar</button>
           </div>
         </form>
   
         {
           people.map((person)=>{
             return(
               <div classname='list' key="{person.id}">
                 {person.firstName}, {person.age}
               </div>
             )
           })
         }
   
     );
   }
   

   Ahora hemos separado los estados y controladores de la parte del código que se muestra en la pantalla. Esto resultará en un código más organizado y legible.

Comments are closed.