how to pass the values between components without using props - reactjs

Question

I want to pass the values from the counter component to Multiplier Component.I am using local storage for that.
I can not use props for this task niether useReducer, context etc.
Task is to on clicking the counter button from counter component it changes the value of multiplier component.
In App.js, the counter component works fine and store the value on localstorage but the multiplier component does not change its value on rendering in App.js as well as in the Counter component. I want to have change the value of Multiplier Component when i click on counter button.
Counter.js
import { useState, useEffect } from 'react'
import Multiplier from './components/Multiplier'
const Counter = () => {
const [counter, setCounter] = useState(1)
useEffect(() => {
localStorage.setItem('count', counter)
}, [])
const funcIncr = () => {
setCounter(counter => counter + 1);
localStorage.setItem('count', counter + 1)
showmult()
}
const funcDecr = () => {
setCounter(counter => counter - 1);
localStorage.setItem('count', counter - 1)
}
const showmult = () => {
return <Multiplier />
}
return (
<div className=''>
<button onClick={funcIncr}>+</button>
<div id='count'>{counter}</div>
<button onClick={funcDecr}>-</button>
<Multiplier />
</div>
)
}
export default Counter
Multiplier.js
import { useState, useEffect } from 'react'
const Multiplier = () => {
const [multiple, setMultiple] = useState(-5)
useEffect(() => {
let value = localStorage.getItem('count')
setMultiple(multiple=>multiple*value)
// multiplier()
}, [multiple])
// const multiplier = ()=>{
// // this.forceUpdate();
// let value = localStorage.getItem('count')
// setMultiple(multiple=>multiple*value)
// }
return (
<>
<div>Multiple: {multiple}</div>
</>
)
}
export default Multiplier
App.js
import Counter from './Counter'
import './App.css';
import Multiplier from './components/Multiplier';
function App() {
return (
<div className="App">
<div className='flex'>
<div>Counter</div>
<Counter/>
<Multiplier/>
</div>
</div>
);
}
export default App;

Answer 1

Counter.js
import React from 'react';
import { useState, useEffect } from 'react';
const Counter = () => {
const [counter, setCounter] = useState(1);
const funcIncr = () => {
setCounter((counter) => counter + 1);
localStorage.setItem('count', counter + 1);
};
const funcDecr = () => {
setCounter((counter) => counter - 1);
localStorage.setItem('count', counter - 1);
};
useEffect(() => {
let value = localStorage.getItem('count');
const count = localStorage.getItem('count');
const multiple = value * count;
document.getElementById('multipler').innerHTML = 'Multiple: ' + multiple;
}, [counter]);
return (
<div className="">
<button onClick={funcIncr}>+</button>
<div id="count">{counter}</div>
<button onClick={funcDecr}>-</button>
</div>
);
};
export default Counter;
Multiplier.js
import React from 'react';
const Multiplier = () => {
return <div id="multipler" />;
};
export default Multiplier;

Answer 2

A solution would be to use a Custom Event
window.dispatchEvent(
new CustomEvent('updateTitle', {
detail: {
firstName: values.firstName,
lastName: values.lastName,
},
}
)
You can add an event listener for the pages in which you want to listen to this event
useEffect(() => {
window.addEventListener("updateTitle", updateTitleEventHandler, false);
return () => {
window.removeEventListener("updateTitle", updateTitleEventHandler);
};
}, []);
const updateTitleEventHandler = useCallback((e) => {
//your logic
});