NextJS Mapping Array from Formik to Router.Push

Question

many of you have been very kind so far to help me already, but I am running into a issue where I can't figure out how to map a object with a array within to the router.

Here is what I have so far:

  const initialValues = {
    region: query.region || 'all',
    camptype: query.camptype || 'all',
    city: query.city || 'all',
    campfeatures: query.campfeatures || 'all',
  };


const handleSubmit = async values => {
    console.log(JSON.stringify(values));
    Router.push(
      {
        pathname: '/camps',
        query: { ...values, page: 1 },
      },
      undefined,
      { shallow: true }
    ).then(async () => {
      refetch();
    });
  };

All the other areas of routing work fine since they send one value, but the features area sends multiple values. So for example here is the data I get from Formik if I select two features:

[
  {
    "label": "Boating / Water Sports",
    "value": "Boating / Water Sports"
  },
  {
    "label": "Hookups W/E/S",
    "value": "Hookups W/E/S"
  }
]

and this is what pops up in the address bar

http://localhost:3000/camps?region=Lakes+Region&camptype=Private+Campground&city=Swanzey&campfeatures=&campfeatures=&page=1

So there's some portion of it working as it's correctly applying 2 campfeatures=, but I can't figure out how to pass the value in addition to that.

Thank you for your help!

Answer 1

There isn't a standard for sending "list" data via query parameters, so the way you do that is up to you. You could convert that array into a comma separated list.

const handleSubmit = async values => {
  console.log(JSON.stringify(values));

  const campfeatures = Array.isArray(values.campfeatures)
    ? values.campfeatures.map(({ value }) => value).join(",")
    : values.campfeatures;

  Router.push(
    {
      pathname: '/camps',
      query: {
        ...values,
        campfeatures,
        page: 1,
      },
    },
    undefined,
    { shallow: true }
  ).then(async () => {
    refetch();
  });
};

This should then create a comma-separated-list in the query string. Something similar to http://localhost:3000/camps?region=Lakes+Region&camptype=Private+Campground&city=Swanzey&campfeatures=Boating+/+Water+Sports,Hookups+W/E/S&page=1 .