Pass list of dictionaries as params in Axios React

I am building a React app. I am trying send a list of dictionaries as params in Axios.

I am using Django REST Framework as backend and it is showing [] or None every time I send request.

App.js

function App() {
    const [currentState, setCurrentState] = useState([{"name": "First", "id": 100}, {"name": "Second", "id": 200},])

    const sendRequest = () => {
        axios.get("/api/", {params: {state: currentState}).then((res) => {
          console.log(res);
        })
    }

    return (
    <>

        <b onClick={sendRequest}>Send request</b>

    </>
    )
}

I am trying to send the whole list to backend as params like:

[{"name": "First", "id": 100}, {"name": "Second", "id": 200}]

But it showing none.

In backend I am accessing like:

views.py

class Api(APIView):

    def get(self, request, *args, **kwargs):
        data = self.request.query_params.get("state")

        print(data)

        return Response({"good"})

I have also tried using paramsSerializer in axios for serialization like :-

    const sendRequest = () => {
        axios.get("/api/", 
             {
               params: {
                  state: currentState
               },
               paramsSerializer: params => {
                 return qs.stringify(params, {arrayFormat: "repeat"})
              },
         ).then((res) => {
          console.log(res);
        })
    }

but it is still not working. Tried also {arrayFormat: "brackets"}.

Back to Top