Using input state in different components - reactjs

Question

I want to use the state of the input in another component in React. So I have a component and in this component, I have a form.
import React, { useState } from "react";
import { Form } from "react-bootstrap";
function Jumbotron() {
const [inputFrom, setInputFrom] = useState("");
return (
<Form className="shadow p-3 mb-5">
<Form.Group controlId="formGroupFrom">
<Form.Label className="form-subtitle">Title</Form.Label>
<Form.Control
type="text"
placeholder="Enter input"
onChange={(event) => setInputFrom(event.target.value)}
/>
</Form.Group>
</Form>
);
}
export default Jumbotron;
So I want to use the 'inputFrom' in other component and I just want to show it. I will do it in several components so could you give me an advice about it?
import React from "react";
import { Container } from "react-bootstrap";
function Checkout() {
return (
<Container>
<div className="shipment-info">
<div className="basic">
<div className="col-2 title">From</div>
<div className="col-4 info">{inputFrom}</div>
</div>
</div>
</Container>
);
}
export default Checkout;

Answer 1

You can pass down the prop to another component like so
<NextComponent propYouWantToPass={inputFrom} />
and use it in the next component like props.propYouWantToPass, assuming you got the props in the next component settings props as a parameter
const NextComponent = (props) => {
return(
<View>
<Text>{props.propYouWantToPass}</Text>
</View>
)
}

Answer 2

As other already said, if you are planning to use Checkout component inside Jumbotron component as a child.
The solution is easy, you just pass inputForm as prop to Checkout and receive or inherit from Jumbotron
Could be something like this:
import React, { useState } from "react";
import { Form } from "react-bootstrap";
import { Checkout } from "./Checkout";
function Jumbotron() {
const [inputFrom, setInputFrom] = useState("");
return (
<>
<Form className="shadow p-3 mb-5">
<Form.Group controlId="formGroupFrom">
<Form.Label className="form-subtitle">Title</Form.Label>
<Form.Control
type="text"
placeholder="Enter input"
onChange={(event) => setInputFrom(event.target.value)}
/>
</Form.Group>
</Form>
{/* <-- give any name instead "inputData" */}
<Checkout inputData={inputForm} />
</>
);
}
export default Jumbotron;
Found your inputForm on Checkout as props.inputData
*Ref: https://reactjs.org/docs/components-and-props.html#rendering-a-component