React: sharing a variable between functions in a same component

Question

I have a function where I am supposed to pass file name so that it can reach next component but I have no idea how to achieve this in functional React. As of now I have a variable file which stores the filename returned from the API below

let file = "";
function submitForm(contentType, data, setResponse) {
    axios({
        url: `http://localhost:5000/uploadfile`,
        method: 'POST',
        data: data,
        headers: {
            'Content-Type': contentType
        }
    }).then((response) => {
        setResponse(response.data)
        file = response.data;
    }).catch((error) => {
        setResponse("error");
    })
}

which I have to pass in here below in function handleClick

export default function Step2({fileName}) {

    function handleClick() {
        fileName = setFile(file);
        console.log(fileName);
        console.log(JSON.stringify(file));
        window.location.replace('/step3?fileName='+fileName)
    }

...

I need to understand how this will work.

you just wanna pass `file = response.data` from submitForm into handleClick? — 0xA, Jul 08 '20 at 22:28

score 0 · Answer 1 · answered Jul 13 '20 at 00:32

0

I got it working by having the function inside the component function and useState hook.

answered Jul 13 '20 at 00:32

Shivam Rai

21
4

React: sharing a variable between functions in a same component

1 Answers1