Question 311007 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How do I create a url link depending on what state I have in my component

I am trying to create a query link that is created based on the state of the component. When user selects an option the states are changed and then user can select ‘search’ button. The query on the search button should however be according to the states that were changed by the user.
For eg.

/rent/?bedrooms=1&bathrooms=1
/rent/?bedrooms=2&parking=1

const FilterOption = () => {
  const [postCode, setPostCode] = useState();
  const [price, setPrice] = useState();
  const [bedroomCount, setBedroomCount] = useState(0);    
  const [bathroomCount, setBathroomCount] = useState(0);
  const [parkingCount, setParkingCount] = useState(0);
}
Tags:

2

Answers


  1. 0

    instead of query params can you use the react router state? something like

    const routeState = {
    postCode,
    price,
    bedroomCount,
    bathroomCount,
    parkingCount,
};
<Link to={{ pathname: "/your-destination-route", state: routeState }}>Go to Details</Link>

    then to use it.

    import { useLocation } from 'react-router-dom';
 const { postCode, price, bedroomCount, bathroomCount, parkingCount } = location.state || {};
    Login or Signup to reply.
  2. 0

    Use the useSearchParams hook to take the current state values and update the URL search params.

    Example:

    import { useSearchParams } from 'react-router-dom';

const FilterOption = () => {
  const [searchParams, setSearchParams] = useSearchParams();

  const [postCode, setPostCode] = useState();
  const [price, setPrice] = useState();

  const [bedroomCount, setBedroomCount] = useState(
    Number(searchParams.get("bedrooms") ?? 0)
  );
  const [bathroomCount, setBathroomCount] = useState(
    Number(searchParams.get("bathrooms") ?? 0)
  );
  const [parkingCount, setParkingCount] = useState(
    Number(searchParams.get("parking") ?? 0)
  );

  const searchHandler = () => {
    setSearchParams(searchParams => {
      searchParams.set("bedrooms", bedroomCount);
      searchParams.set("bathrooms", bathroomCount);
      searchParams.set("parking", parkingCount);
      return searchParams;
    });
  };

  ...
}

    If you need a little more control over the search params you can check the counts and remove params where the count is 0.

    const searchHandler = () => {
  setSearchParams(searchParams => {
    if (bedroomCount) {
      searchParams.set("bedrooms", bedroomCount);
    } else {
      searchParams.delete("bedrooms");
    }
    if (bathroomCount) {
      searchParams.set("bathrooms", bathroomCount);
    } else {
      searchParams.delete("bathrooms");
    }
    if (parkingCount) {
      searchParams.set("parking", parkingCount);
    } else {
      searchParams.delete("parking");
    }

    return searchParams;
  });
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search