How to arrange interaction of React components in an existing project?

For a start I will give a very exaggerated example of what is already there, to make it easier to understand what I want to.

The first component makes the input of numbers:
class FirstСomponent extends React.Component {
 render() {
 return <input type="number" onchange="{this.props.onChange}">;

The second is their conclusion:
class SecondСomponent extends React.Component {
 render() {
 return <div>{}</div>;

And there is a wrapper component that has state handles the event, transfers the data to downstream components, i.e., provides a logic:
class Main extends React.Component {
 state = { val: 0 };

 onChange = e => {
 this.setState({ val: });

 render() {
 return (
the <div>
 <firstСomponent onchange="{this.onChange}">
 <secondСomponent data="{this.state}">

And all of this appears in one place in the document:
const rootElement = document.getElementById("root");
, rootElement);

I understand this is a standard scheme of interaction between components. This is what I already have up and running.

Now I need to integrate same functionality to your existing website, and the first component must be (conditionally) in the header, and the second in the footer and not somewhere nearby in one place so that I can embed as in the example above.

I.e. I need to insert into an existing page separately FirstСomponent and SecondСomponent and somehow make them work together.

I don't know.
June 3rd 19 at 20:57
2 answers
June 3rd 19 at 20:59
Thank you, this is what you need. - Audie.Bechtel commented on June 3rd 19 at 21:02
June 3rd 19 at 21:01
If someone suddenly the same need, here is a good example (not mine)

 render() {
 const { dateStr } = this.state;

 return (
 <headercontent datestr="{dateStr}">,
 the <div>This is the main content</div>
, document.getElementById("footer") )} ); } } ReactDOM.render(<myapp>, document.getElementById("main"));</myapp>

Find more questions by tags React