React pass a const from child component to parent

JavaScript
1

Hello, I have created a new const (a concatenated string) to be used as a URL for a fetch function. I validated the concatenated string works by console.log and now I want to pass it to another component that has the fetch function, but I can’t seem to get that part right, any suggestions? Thanks for your help!

Child component: “URLconcatenate.js”

import React from 'react'

const apiRequest = 'https://finnhub.io/api/v1/quote?symbol='
const stockSymbol = "AAPL";
const tokenstring = '&token=cmhauvpr01qmgvct6qk0cmhauvpr01qmgvct6qkg'
const urlString = apiRequest + stockSymbol + tokenstring

//this works fine!
console.log(urlString);

//I am not sure if I'm doing this part right
function URLconcatenate() {
    return (
        <div>
            {this.props.urlString}
        </div>
    )
}

export default URLconcatenate

Parent component: “Datafetch.js”

import URLconcatenate from './URLconcatenate';
import { useState, useEffect } from 'react';

const Datafetch = () => {
    const [price, setPrice] = useState([]);
    useEffect(() => {
        //this is the new way I want to pass the concatenated URL
        fetch({ urlString })
        //this is the older, hard-coded way
        //fetch('https://finnhub.io/api/v1/quote?symbol=AAPL&token=cmhauvpr01qmgvct6qk0cmhauvpr01qmgvct6qkg')
            .then((response) => {
                return response.json();
            })
            .then((data) => {
                console.log(data);
                setPrice([data]);
            });
    }, []);
    return (
        <div>
            {price.map((thePrice) => (
                <p key={thePrice.c}>Today's price for AAPL is: ${thePrice.c}</p>
            ))
            }
        </div >
    );
};

export default Datafetch
2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.