Pass Data from an Input Field to another Component

Hello, I have two components in React and want to pass data from 1. Inputfield to 2. URLconcatenate but I am not certain which is considered the parent or child, and how to pass the data along; as a state, as data, here’s what I have so far:

Input.js

import { useState } from 'react';

const Inputfield = () => {
    const [stockSymbol, setstockSymbol] = useState('');
    const handleChange = event => {
        setstockSymbol(event.target.value);

    };
    const handleClick = event => {
        event.preventDefault();
        console.log(stockSymbol);
        document.getElementById("showTextHere").innerHTML = ('handleClick', stockSymbol);;
    };

    return (
        <div>
            <input
                placeholder="Type a stock symbol"
                type="text"
                id="stockSymbol"
                name="stockSymbol"
                onChange={handleChange}
                value={stockSymbol}
                autoComplete="off"
            /><br />
            <button onClick={handleClick}>Click to show stock price</button>
            <p id="showTextHere" style={{ color: "green" }}>
                {stockSymbol}</p>
        </div>
    );
};
export default Inputfield

When I click the button, I can display the captured input text, so now, how do I pass it along to the next component so it can be used for another function?

URLconcatenate.js

import Inputfield from './Inputfield';

const apiRequest = 'https://finnhub.io/api/v1/quote?symbol='
const stockSymbolReceived = { stockSymbol };
const tokenstring = '&token=cmhauvpr01qmgvct6qk0cmhauvpr01qmgvct6qkg'
export const urlString = apiRequest + stockSymbolReceived + tokenstring

console.log(urlString);

function URLconcatenate() {
    return (
        <div>
            {urlString}
        </div>
    )
}

export default URLconcatenate

I then have a third component that takes the Concatenated URLstring and uses it to fetch data. This component works well, I just want it to receive dynamic data from the input field and pass it to the URLconcatenate component instead of the static data as I have it now as a placeholder.

You could pass it as props

Would you be able to show me how to do that? I haven’t been able to get this right…

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