Bind data and pass it to another component as a const

Hi, I am using React, and want to capture data from an input field and pass it as a const to another component. I’ve used the basic useState function to bind the data from the input field to render on page, but I do not know how to export it as a const so I can import it into another component…

In the JSX, I can call {state} and it renders as I enter it into the text field, so how do I capture that data. Specifically, I want to have a button with an onClick function to set off this event.

import { useState } from 'react';

//this doesn't work
//export const inputStockSymbol = state

//this doesn't work
//console.log(state);

function Inputfield() {
    const [state, setState] = useState('');
    return (
        <>
            <h2>Input Component</h2>
            <label>Enter a stock symbol here</label>
            <br />
            <input
                value={state}
                onChange={(event) => {
                    setState(event.target.value);
                    console.log(state);
                }}
            />
            <p>
                {state}
            </p>
        </>
    );
}

export default Inputfield;

if you tried to access state as shown in the comments (outside the InputField component) then it probably wouldn’t work due to variable scoping. You can read more about that here: Scope - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

I’m trying this a little differently but still stuck, any suggestions are appreciated…

Using React, I am trying to capture text and then pass it to another component as a const, which gets added to some concatenated text to create a specific URL, having trouble passing the input value…

Input field component

import { useState } from 'react';

function Inputfield() {
    const [value, setValue] = useState("");

    return (
        <div>
            <input type="text" onChange={(e) => setValue(e.target.value)} />
            <br />
            <button
                onClick={
                    () => console.log(value)
                }>Get input value</button>
        </div>
    );
}

export default Inputfield

Receiving component to concatenate the passed value

import Inputfield from './Inputfield';

const part1 = 'www.'
const part2 = TEXT FROM INPUT FIELD GOES HERE;
const part3 = '.com'
export const urlString = part1 + part2 + part3

console.log(urlString);

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

export default URLconcatenate