React context updating on one page only

Question

please check out the images I'm using a language context wrapping my app with it's provider and calling it from the select language page and it works fine at this page when updating it, but at the other page it still give the default value which is null. I appreciate any help...

code: https://m1id4.csb.app/

Answer 1

The bug is cause by link href -> this cause the App to refresh -> setting back the state to its initial state

        <Link href="/page2">See Text</Link>

Try these one

        import { Link } from 'react-router-dom';

        <Link to="/page2">See Text</Link>

Your business logic in changing language has some performance issue since your change the state with a json file what about like this

            {
                "hello": {
                    "en": "Hello",
                    "ar": "مرحباَ"
                }
                "text": {
                    "en": "Programmatic"
                    "ar": "الخاص"
                }
            }