Integración del Hook useSearchParams

En el componente de ejemplo ProductsPage, se integra useSearchParams para gestionar los parámetros de consulta.

import React, { useState, useEffect } from "react";
import { useSearchParams } from "react-router-dom";

const ProductsPage = ({ data }) => {
  const [companies, setCompanies] = useState(data);
  const [searchParams, setSearchParams] = useSearchParams();

  // Function to update the displayed `companies` based on query parameters
  const updateCompanies = (params) => {
    const filteredCompanies = data.filter((item) => {
      const { companyName } = item;
      if (params.get("name")) {
        return companyName.toLowerCase().includes(params.get("name"));
      }
      return true;
    });
    setCompanies(filteredCompanies);
  };

  useEffect(() => {
    // When the component mounts or query parameters change, update the displayed `companies`
    updateCompanies(searchParams);
  }, [searchParams, data]);

  // Function to update query parameters based on user input
  const handleChange = (e) => {
    const newName = e.target.value;
    setSearchParams({ name: newName });
  };

  return (
    <>
      <input
        type="text"
        value={searchParams.get("name") || ""}
        onChange={handleChange}
      />
      <ul className="companyList">
        {companies.map(({ id, companyName, companyDescription }) => (
          <li key={id}>
            <h2>{companyName}</h2>
            <p>{companyDescription}</p>
          </li>
        ))}
      </ul>
    </>
  );
};

A continuación se presenta un desglose del código:

1. Se importan las dependencias necesarias: useState, useEffect y useSearchParams de React Router;
2. Se inicializa el estado dentro del componente utilizando useState. El estado companies almacena los datos que se mostrarán, y se utiliza la función setCompanies para actualizarlos;
3. Se crea una función updateCompanies para filtrar los datos en función de los parámetros de consulta. La función recibe los parámetros de consulta actuales como una instancia de URLSearchParams y los utiliza para filtrar los data. En este caso, filtra por el parámetro "name";
4. Se utiliza el hook useEffect para ejecutar la función updateCompanies cuando el componente se monta y cada vez que los parámetros de consulta cambian. Esto garantiza que los datos mostrados se mantengan sincronizados con la URL;
5. La función handleChange actualiza el parámetro de consulta "name" en respuesta a la entrada del usuario. Cuando el campo de entrada cambia, llama a setSearchParams con el nuevo valor del parámetro;
6. En la declaración de retorno del componente, se renderiza un campo de entrada para la interacción del usuario y una lista de empresas basada en los datos filtrados.

Este código demuestra cómo integrar useSearchParams y React Router para crear una aplicación web dinámica que responde a los cambios en los parámetros de consulta.