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.