How to pass an array in query parameter reactjs

Question

I Am using multiselect dropdown, what i want is whatever i've selected in dropdown to send it to the server by calling an api which contains query param to accomodate these dropdown result. I have made an array of selected items. Array(3) [ "IphoneXR", "Nokia", "Samsung" ] I want this array to get pass to below url like this: http://localhost:8080/details?dropdown=IphoneXR,Nokia,Samsung. With my approach i am ending up with this: http://localhost:8080/details?dropdown[]=IphoneXR&dropdown[]=Nokia. I am not sure why dropdown[] is coming twice. Can anyone please help me with it

Hello! Please share the code snippet that is causing issue for the community to be able to contribute. — Dhruv Shah, Jun 30 '20 at 09:57
This will be helpful to you [https://stackoverflow.com/questions/1763508/passing-arrays-as-url-parameter] — Jay Parmar, Jun 30 '20 at 10:01

score 3 · Accepted Answer · answered Jun 30 '20 at 10:24

Convert the array into string and pass the value in query param.

multiSelectHandler = (option) => {
    const details = option.selectedItems;
   const stringData =  details.map(({value}) => `${value}`).join(',');
   console.log(stringData);
  };

Array: Details: Output in console

0: Object { value: "Iphone", label: "Iphone" }
    1: Object { value: "Samsung", label: "Samsung"}

After converting into string:Output in console, Iphone,Samsung

Now pass this stringData in queryparam

score 1 · Answer 2 · answered Jun 30 '20 at 10:13

1

If you are passing it directly to a url via the form actions it will sent it in the url as this: index.html?cars=saab&cars=opel&cars=audi

Try handling the form via js like this How handle multiple select form in ReactJS

answered Jun 30 '20 at 10:13

bolarson

199
3

How to pass an array in query parameter reactjs

2 Answers2