Fetch data depending by request in ReactJs

Question

I want to send the http request what will depend by the button what was clicked. So, bellow is my fetch and it is working:

 //children component const Post = (props) => { function sendRequestToParrent() { props.rRequests("POST") } return ( <div> <Button onClick={() => { sendRequestToParrent(); }} type='submit'>POST DATA</Button> </div> ); }; export default Post; //parent component const [variable, setVariable ] = useState(''); // here i set the data from child component which was received with a callback. function rRequests(request) { setVariable (request); return ( fetch("URL", { method: `${variable}`, headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' }, body: JSON.stringify({ .... }) }).then(res => { console.log("response", res); }) ) } return ( <div> <Post rRequests={rRequests} /> </div> )

The issue appear when i change the method from method: POST to method: ${variable}`. It is possible to add a variable inside method and depending by what value that variable will have, to get the response?

For example: if i will click a button the variable will be equal with "POST", when i will click on another button the variable will be equal with 'DELETE' and depending by this to get the response.

Answer 1

This is a classic case of the asynchronous nature of setVariable. You are setting the variable and then immediately using it. As the setting of any state happends asynchronously, that is why it is still empty where it being assigned to method. You can directly assign the value of request that you are passing as the parameter to the function.

 function rRequests(request) { setVariable (request); return ( fetch("URL", { method: `${request}`, headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' }, body: JSON.stringify({ .... }) }).then(res => { console.log("response", res); }) ) }

You can use the new variable in useEffect hook if you want to

Answer 2

remove template literal from the method

You need to set the incoming request type from the higher component. "" is showing because of the default parameter you are initiating.

const [variable, setVariable ] = useState(''); // here i set the data from child component which was received with a callback. 

setVariable(this.props.method); // method is the parameter name you are passing from the parent component

function submit() {
    return fetch("URL", {
                method: variable,
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({ .... })
            }).then(res => {
                console.log("response", res);
            });
    }