Issue with React development server refresh. How do i solve it?

Solution for Issue with React development server refresh. How do i solve it?
is Given Below:

Welcome.

I just started to learn ReactJS, for the first few attempts, it was okay, but since a few hours, every time, when I create a new component, after I define the exact component and gives it content, when I attempt to use it in the App.js, or anywhere (after importation, of course), it displays a few components, but not all, either I refresh it.

The only solution is, if I delete the closing bracket of the return statement, save it, wait for the error on the development server, then write it back.

e.g.

function MainNavigation() {
return (
    <header>
        <div>React Meetups</div>
        <nav>
            <ul>
                <li>
                    <Link to="/">All Meetups</Link>
                </li>
                <li>
                    <Link to="/new-meetup">Add New Meetup</Link>
                </li>
                <li>
                    <Link to="/favorites">My Favorites</Link>
                </li>
            </ul>
        </nav>
    </header>
);
}

In this case, after ctrl+s, the dev. server displays the div, and the “All Meetups” list item with the link, but not the other two.
If i delete the ); part of the statement, then save it, and write back, then save it again, only then will the changes appear.

Any ideas?

Few problem which I can think of are as follow

  1. Try to do hard refresh instead of deleting the “);”
  2. Try to inspect the file from developer console. May be some css color ias same as background color.