I'm new to React. I'm doing a project where I have let's say 2 pages, page A and B. In each page, I put a modal called background modal which has 3 buttons of color (red, green, and blue). What I want to achieve is every time I open the modal and clicked one of the button, the background of the page will have the same color as the button (I clicked blue button, the background of page A and B will be blue as well). I read some references which says I can use either context API or redux to achieve it, but I'm not sure which way I should use. Any suggestion and reference so I could achieve my goal? This is the structure of my project:
App.js
<App>
<Page1 />
<Page2 />
</App>
Page1.js:
<div>
<modal />
</div>
Page2.js:
<div>
<modal />
</div>
Modal.js:
<div>
<button red />
<button green />
<button blue />
</div>
For this, I think localstorage is the best option because after selecting any color if you reload your page then the selected color will be gone. you can try to save the color in localstorage and set the color from it.
localStorage.setItem("color", "red"); // set color like this
localStorage.getItem("color")??'red'; // get color from localstorage if color not found then set defult one.