Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6208

React + TS: How to call a method from outside of a React Functional Component

$
0
0

Im wondering how I can call a method from outside of a React Functional Component. I wrote the function GetUsedLockers() which gets all the used lockers and returns amount. Now I want to call this function from another another component (OrgLocker.tsx) and display the data from the getUsedLockers() function there.

OrgLockerTables.tsx

const OrgLockerTables: React.FC = () => {


    const lockerCall = 'lockers';
    const [lockerData, setLockerData] = useState({
        id: 0,
        guid: "",
        is_currently_claimable: false
    }[""]);

    useEffect(() => {
        componentConsole().then((res) => {
            setLockerData(res);
        })
        // eslint-disable-next-line   
    }, []);
    if (!lockerData) return (<div>Loading...</div>);


    //function to get all used lockers
    function getUsedLockers() {
        let amount = 0;

        for (let i = 0; i < lockerData.length; i++) {
            if (!lockerData.is_currently_claimable) {
                amount++;
            }
        }
        console.log('log from getusedlockers, amount: ', amount)
        return (amount)
    }


    // function to get JSON data from the API
    function componentConsole(): Promise<any> {
        return new Promise<any>((resolve, reject) => {
            http.getRequest('/' + lockerCall).then((res) => {
                let data = res.data.data;

                console.log('data:', data);
                resolve(res.data.data);
            }).catch((error) => {
                console.log(error);
                reject();
            });
        })
    }
}

OrgLocker.tsx

import OrgLockerTables from '../tables/orgLockerTables';

const OrgLockers: React.FC = () => {

    let lockerTable = new OrgLockerTables();

    return (
        <div className="main-div-org">
        <p>Used</p>
        <p>{lockerTable.getUsedLockers()}</p>
        </div>
    );
}

export default OrgLockers;

When trying to make a call to OrgLockerTables and storing it in the lockerTable let it gives the following error:

Expected 1-2 arguments, but got 0.ts(2554)

Any help would be greatly appreciated!


Viewing all articles
Browse latest Browse all 6208

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>