Proyecto buscador de Gifs 2


*

">

Creacion de Componentes, On Change


Creacion de Componentes
Crearemos otra carpeta con los componentes (dentro de la carpeta src ) llamada components y ahi crearemos nuestros archivos con los componentes (recordar exportar el componente)
Agregar categorias manualmente desde un input
Necesito tener un tipo de estado ya que queremos conocer lo que el usuario escribe por eso uso el useState

Hola Mundo sera el valor inicial del inputValue y podria ser un string, array, objeto o lo que necesitemos

ON CHANGE importancia
Si no extraemos el valor del target no podremos modificarlo y tendredemos problemas
Para ello creamos una funcion llamada handleInputChange que esta capturara el evento, para luego asignarlo ahora si al setInputValue ...
con esto podremos escribir libremente en el input

El input value siempre sera el valor actulizado de lo que el usuario haya escrito
En el <h1>{inputValue}</h1> se ira actualizando segun el valor que tengamos en nuestro formulario 

// Archivo AddCategory.jsx 
import React, { useState } from 'react';

const AddCategory = () => {
  const [inputValue, setInputValue] = useState('Hola mundo');

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };
  return (
    <>
      <h1>{inputValue}</h1>
      <input type='text' value={inputValue} onChange={handleInputChange} />
    </>
  );
};

export default AddCategory;
">

Prevenir comportamiento por defecto del formulario


Prevent Default

El comportamiento por defecto refresca completamente la pagina para evitarlo usaremos el e.preventDefault() y a nuestro formulario le añadimos onSubmit={handleSubmit}`

Nota en el caso de tener un elemento que agrupe a los demas (form) podemos desacernos del fragment(Como en el ejemplo) 

// Modificacion del archivo AddCategory.jsx 
import React, { useState } from 'react';

const AddCategory = () => {
  const [inputValue, setInputValue] = useState('Hola mundo');

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
  };
  return (
    <form onSubmit={handleSubmit}>
      <input type='text' value={inputValue} onChange={handleInputChange} />
    </form>
  );
};

export default AddCategory;
">

Comunicacion entre componentes

Podemos trapasar propiedades a los componentes se le envia a la funcion setCategories la referencia de setCategories 

// Archivo GifExpertApp.jsx 
import { useState } from 'react';
import AddCategory from './components/AddCategory';

const GifExpertApp = () => {
  const [categories, setCategories] = useState([
    'One Punch',
    'Samurai X',
    'Dragon Ball',
  ]);

  return (
    <>
      <h2>GifExpertApp </h2>
      <AddCategory setCategories={setCategories} />
      <hr />

      <ol>
        {categories.map((category) => {
          return <li key={category}> {category} </li>;
        })}
      </ol>
    </>
  );
};

export default GifExpertApp;
">

Activar boton entre formularios


Se puede usar props pero no es tan comun, entonces desctructuramos setCategories y usamos una funcion de flecha con cats

Esto debido a que no tenemos acceso de esta manera a las categorias ni al arreglo categories que esta dentro de GifExpertApp
Errores de validacion:
Si enviamos dos veces el mismo elemento no podemos almacenarlos con el mismo key tampoco recibir un string vacio, para ello realizaremos validaciones Sera una validacion sencilla con el if y la longitud Y borrando el valor por defecto despues del envio
Haciendo lo mismo usando PROP TYPES
Si queremos que setCategories sea una funcion requerida para el componente AddCategory.js lo podemos condicionar para que este definido dentro de mi GiffExpertApp.js
Para esto importamos Proptypes y al final del codigo damos esa condcion que queremos
Error undefined donde antes teniamos el valor por defecto de Hola mundo
Si dejamos a secas el valor en el useState() tendremos un undefined en el inputValue (por lo tanto el value) y no podremos usar el componente ya que no podemos pasar de undefined a un string
Para corregir este error debemos hacer que el inputValue sea un string vacio '' 

// Modificacion del archivo AddCategory.jsx 
import React, { useState } from 'react';

const AddCategory = ({ setCategories }) => {
  const [inputValue, setInputValue] = useState('Hola mundo');

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (inputValue.trim().length > 2) {
      setCategories((cats) => [...cats, inputValue]);
      inputValue('');
    }
  };
  return (
    <form onSubmit={handleSubmit}>
      <input type='text' value={inputValue} onChange={handleInputChange} />
    </form>
  );
};

export default AddCategory;