React.js: Convert this kind of array format to JSON

Question

I'm trying to pass an argument to an axios post request

Normally what I need is this kind of JSON

[{"moduleId":"ASDJI-1212JSDF-12412SN"}]

This would come from clicking a value in a listbox and moving it to the right

I have this code where I push the value of the listbox to an array state


    const [selectedModules, setSelectedModules] = useState([]);

    const retrieveActionsList = useCallback(() => {
        ProfileMaintenanceService.retrieveActionsList(selectedModules)
        .then((response) => {
          console.log("ProfileMaintenancePage - retrieveActionsList response.data >>> " + response.data)
          console.log("ProfileMaintenancePage - retrieveActionsList JSON.stringify(response.data) >>> " + JSON.stringify(response.data))
          setListboxActions(response.data);
        }).catch((err) => {
          console.log("ProfileMaintenancePage - retrieveActionsList catch >>> " + err)
        })
      });

     const handleOnChange = (selected) => {
        console.log("selected " + selected)
        selectedModules.push(selected);
        retrieveActionsList()
      };

    return (
    <DualListBox
                    options={ newOptionsListbox }
                    selected={ selectedModules }
                    onChange={ handleOnChange }
                    showHeaderLabels={ true }
                    disabled={ disabled }

                />

    )

Somehow, I'm getting this value:

[["C77C1031-2714-483D-AE59-21C9CD5EBAEF"]]

Would like to ask for help how to convert this to proper JSON format.

TIA

EDIT:

axios request

/* API for populating actions in listbox */
    retrieveActionsList(selectedModules) {
        return axios.post(`${API_URL_RETRIEVE_ACTIONS}`,
        [
            {
                moduleId: selectedModules
            }
        ]
        )
    }

user54321 · Accepted Answer · 2020-04-06 04:46:53Z

1

You need to push a new object to selectedModules and for doing that u need to use setSelectedModules() like this.

Instead of

selectedModules.push(selected);

Use this,

setSelectedModules([...selectedModules,{moduleId:selected}]);

Modifying the state variable selectedModules directly does not cause a re-render and may not reflect the required change in the UI.

Update

Given the format the response has, you also need to do a map operation on the response before setting it to state.

setSelectedModules(
    response.data[0].map((id)=>({moduleId: id} )
);

edited Apr 6, 2020 at 4:46

answered Apr 6, 2020 at 3:53

user54321

6326 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

iamjpcbau Over a year ago

If modifying state variable may not reflect the required change, how should I access the value of the state?

user54321 Over a year ago

How does the response look like when there are two module ids? Like this ? [["asdf-sdfs-sdf"],["asfa-asdfa"]]

user54321 Over a year ago

You can access the value directly. But to update you need to use the setter.

iamjpcbau Over a year ago

It looks like this [["4E948025-1F1B-41E2-A18D-55AD8646810B","C77C1031-2714-483D-AE59-21C9CD5EBAEF"]]

user54321 Over a year ago

You also need to do a map().. Please see the updated answer.

|

Collectives™ on Stack Overflow

React.js: Convert this kind of array format to JSON

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related