How to call an API in a conditional with React

Question

I would like when I open a modal only launch a service if the modal is open, and re-use the service data for another injection in another component.

Here is the component :

import React from 'react';
import { Modal } from 'react-bootstrap';
import FormResolveDispute from '../forms/form-resolve-dispute';
import { useGetAllMovementsByTiersQuery } from '../../services/EventApi';

const ModalResolveEvent = (props: any) => {
const {show, onClose, dispute} = props;
if (show) {
    const {mouvement} = useGetAllMovementsByTiersQuery(
        {
            qp: new URLSearchParams({
                eventId: dispute.id,
            }).toString(),
        },
        {
            selectFromResult: ({data}) => ({
                movement: data?.items || [],
            }),
        }
    );
    return data;
}
return (
    <>
        <Modal show={show} onHide={onClose} centered={true} scrollable={true}>
            <Modal.Header closeButton>
                <Modal.Title className="text-title">
                    Test
                </Modal.Title>
            </Modal.Header>
            <Modal.Body>
                <FormResolveDispute
                    mvts={mouvement}
                    submitCallback={onClose}
                />
            </Modal.Body>
        </Modal>
    </>
   );
 };

 export default ModalResolveEvent;

here I check if show is true to make the call

 if (show) {
   const {movement} = useGetAllMovementsByTiersQuery(
    {
        qp: new URLSearchParams({
            eventId: dispute.id,
        }).toString(),
    },
    {
        selectFromResult: ({data}) => ({
            movement: data?.items || [],
        }),
    }
);
return movement;

}

and I would like to inject the movement into the FormResolveDispute component.

   <FormResolveDispute mvts={movement} submitCallback={onClose} />

But I have the following error message

TS2304: Cannot find name 'movement'.

I would like to retrieve the movement generated in the conditonnal to send it back to the FormResolveEvent

Could you tell me where the problem is or if there is another way ?

TS2304: Cannot find name 'movement'. It's because movement is inside the scope you must aware. In my opinion you can save the movement to state. — edhi.uchiha
– edhi.uchiha, Commented Oct 8, 2021 at 23:49
@edhi.uchiha Thank you for your answer, but how to implement this change ? — Greg-A
– Greg-A, Commented Oct 11, 2021 at 8:45

edhi.uchiha · Accepted Answer · 2021-10-11 14:54:16Z

1

Please try this.

// create initial state
const [movement, setMovement] = useState([]);

if (show) {
const { movement } = useGetAllMovementsByTiersQuery(
    {
        qp: new URLSearchParams({
            eventId: dispute.id,
        }).toString(),
    },
    {
        selectFromResult: ({data}) => ({
            movement: data?.items || [],
        }),
    }
   );

// set state
setMovement(movement);
}

So in this component, movement props is get from state

<FormResolveDispute
     mvts={movement}
     submitCallback={onClose}
     />

answered Oct 11, 2021 at 14:54

edhi.uchiha

3742 silver badges9 bronze badges

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

4 Comments

Greg-A Over a year ago

thank you for the answer but the modification gives me an error message: React Hook "useGetAllMovementsByTiersQuery" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function. I think a react-hook cannot be used in conditional

edhi.uchiha Over a year ago

Are you use class or functional component ?

Greg-A Over a year ago

functionnal component

edhi.uchiha Over a year ago

hm but the problem not because hook used in conditional

Collectives™ on Stack Overflow

How to call an API in a conditional with React

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related