reactjs - how do i set/add variable in axios response and access later in render?

Question

Im trying to set a variable in axios and trying to access it in the render method.

 useEffect(() => {
        let bodyData = new FormData()
        bodyData.append("vendor",user["back_id"])
        axios.get('/category',{params:bodyData}).then(categoryResponse => {
            categoryResponse.data.forEach((value,index,array)=>{
                let body = new FormData()
                body.append("vendor",user["back_id"])
                body.append('category_id',value)
                axios.get('/category/subcategory',{params:body}).then(subResponse=>{
                    subResponse.data.forEach((sc,index)=>{
                        categoryResponse.data.forEach((category,index)=>{
                            if (category.id === sc.category_id) {
                                if(categoryResponse.data[index].subcategory === undefined){
                                    categoryResponse.data[index].subcategory = []
                                }
                                //setting subcategory variable here
                                categoryResponse.data[index].subcategory.push(sc)
                            }
                        })
                    })
                })
            })
            setCategory(tableData)

        })
        return () => {

        }
    },[setCategory,user])

i have set the variable in my axios response in useEffect.Using memo to avoid re-renders.

now when i try to access it in render

{
                    Object.values(category).map((value,index) => {
                        return (
                            <List key={`list${value.id}`}>
                                <Accordion key={value.id} mt={2}>
                                    <AccordionSummary
                                        key={`summary-${value.id}`}
                                        expandIcon={<ExpandMoreIcon/>}
                                        aria-controls="panel1a-content"
                                        id="panel1a-header"
                                    >
                                        <ListSubheader key={`sublistHeader-${value.id}`} className={classes.sublistHeader}
                                                       component="div"
                                                       id="nested-list-subheader">
                                            {value.name}
                                        </ListSubheader>
                                    </AccordionSummary>


                                    <AccordionDetails key={`accordionDetails-${value.id}`}
                                                      className={classes.subCategoryList}>
                                        <Button
                                            className={classes.button}
                                            variant='contained'
                                            color="primary"
                                            onClick={() => setOpen(true)}
                                            key={`button-${value.id}`}
                                        >
                                            Add Sub-Category
                                        </Button>
                                       
                                        console.log(value);//shows subcategory values here.
                                        console.log(subvalue[1].subcategory);//i know the index. undefined
                                        console.log(subvalue[1]["subcategory"]);//i know the index.undefined here also
                                        {Object.values(value).forEach((subvalue, index,array) => {
                                            console.log(subvalue); // it does not print values for subcategory
                                            // return (
                                            //     <ListItem button key={`sublist-${subvalue}`}>
                                            //         <ListItemText key={`index ${subvalue}`} inset primary={subvalue}/>
                                            //     </ListItem>
                                            // )
                                        })}
                                        <NewSubCategoryModal key={`dialogNext${value.id}`} open={open}
                                                             categoryId={value.id}
                                                             onClose={() => setOpen(false)}/>
                                    </AccordionDetails>
                                </Accordion>
                            </List>)

                    })
                }

when i log the whole object i can see subcategory key. but when i try to access it, undefined is returned.

Any help will be highly appreciated.

question from:https://stackoverflow.com/questions/66051174/how-do-i-set-add-variable-in-axios-response-and-access-later-in-render

Answer 1

Waitting for answers