Run one function after another

Question

I am trying to to set a hook on click. When that hook is set, it enters a url and then when it is set, it is supposed to run a handleSubmit function to update the urls and display it to screen. My problem is that the function run at the same time. I have tried to use the useEffect method, by placing the handleSubmit function in there, but it keeps giving errors about the event object. I have tried the async/await function on the onClick method but have read that it doesn't work on hooks. I have read the promises docs but they are confusing right now. Can anyone point me in the right direction?

   const Peers = ({ peerData, symbol, handleSubmit }) => {

    const [peerSymbol, setPeerSymbol] = useState('');
    let today = new Date().toISOString().slice(0, 10)

    const urls = [
        `https://finnhub.io/api/v1/company-news?symbol=${peerSymbol}&from=2021-03-01&to=${today}&token=`,
        `https://finnhub.io/api/v1/stock/peers?symbol=${peerSymbol}&token=`,
        `https://finnhub.io/api/v1/stock/profile2?symbol=${peerSymbol}&token=`,
        `https://finnhub.io/api/v1/stock/financials-reported?symbol=${peerSymbol}&token=`,
        `http://api.marketstack.com/v1/tickers/${peerSymbol}/eod/latest?access_key`
    ]


    useEffect(() => {
        let e = e
        return (e) => handleSubmit(e, urls);
    }, [peerSymbol])
    
    
    return (
        <div className="peers bg-light">
            <h2>Peers</h2>
            {peerData.filter(peer => {
                return peer !== symbol.toUpperCase();
            }).map(element => {
                return <span 
                key={element} 
                onClick={async (e) => { setPeerSymbol(element); handleSubmit(e, urls) }}>{element}</span>
            })}
        </div>
    );
}

Answer 1

Add a function outside the component's body as getUrls and call it with the element and date:

const getUrls = (peerSymbol, today) => ([
    `https://finnhub.io/api/v1/company-news?symbol=${peerSymbol}&from=2021-03-01&to=${today}&token=budo2rv48v6spq9og4p0`,
    `https://finnhub.io/api/v1/stock/peers?symbol=${peerSymbol}&token=budo2rv48v6spq9og4p0`,
    `https://finnhub.io/api/v1/stock/profile2?symbol=${peerSymbol}&token=budo2rv48v6spq9og4p0`,
    `https://finnhub.io/api/v1/stock/financials-reported?symbol=${peerSymbol}&token=budo2rv48v6spq9og4p0`,
    `http://api.marketstack.com/v1/tickers/${peerSymbol}/eod/latest?access_key=72d118ca9db1873033447561590e2794`
]);

const Peers = ({ peerData, symbol, handleSubmit }) => {

    const [peerSymbol, setPeerSymbol] = useState('');
    const today = new Date().toISOString().slice(0, 10)
    
    return (
        <div className="peers bg-light">
            <h2>Peers</h2>
            {peerData.filter(peer => {
                return peer !== symbol.toUpperCase();
            }).map(element => {
                return <span 
                key={element} 
                onClick={async (e) => { setPeerSymbol(element); handleSubmit(e, getUrls(element, today)) }}>{element}</span>
            })}
        </div>
    );
}

this way you don't have to rely on the component's state to update before calling handleSubmit and you can remove useState if it's no longer needed.