Why does React functionality not working on Chrome and Opera? - reactjs

Question

I made a Single Page Application with React and everything was fine until I tested it on all the major browsers.
I used Mozilla during the development but then I tried it on other browsers and it worked on Edge, Explorer and Mozilla but it didn't on Chrome and Opera. All of the UI stuff works fine, and everything design related behaves well except the functionality that I made with React. So clicking on the Meal Types on the options dropdown, another list is supposed to appear on the page replacing the initial one with those 3 sections(Blog, Recipe, Tips). The application is supposed to expand further again by clicking on the Cookie section and again by clicking on the Horse section. As I said, all of this works fine except in Chrome and Opera. I want to make React behave as I described in Chrome and Opera too.
This is a link to the files
https://github.com/cristiAndreiTarasi/React_App
I expect that on clicking on the Meal Type option the app make those additional sections appear below - as it does in other browsers - in Chrome and Opera browsers and find what the problem is.

Answer 1

In your Header.jsx and Footer.jsx files you use class instead of className a few times, so you should correct that: https://reactjs.org/docs/faq-styling.html
Your problem is that you are registering an onClick on the <option> element, when you should be using the onChange prop on the <select> element itself, not the <option> element.
<select onChange={this.handleChange} className="custom-select mb-3">
<option selected>All</option>
<option value="mealType">Meal Type</option>
<option>Ingredients</option>
<option>World Cuisine</option>
<option>Cooking Style</option>
</select>
Your event handler looking like this:
handleChange = (event) => {
this.setState({
[event.target.value]: true,
});
}
Your state shouldn't be holding entire React components like it currently is, instead try something like this:
state = {
mealType: false,
}
With your render looking like this:
{this.state.mealType && <MealType click={this.handleClickTwo}/>}
As a general rule: state should contain data that a component's event handlers may change to trigger a UI update. this.state should only contain the minimal amount of data needed to represent your UI's state. See here for more details: http://web.archive.org/web/20150419023006/http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html