Third Pull Request of Hacktoberfest

In the third week, I have found this project, 10secondsofcode. It is the website that teaches people about ReactJS and JavaScript from basic to advance.

In this project, I have noticed that their Dark Mode does not affect the entire screen. I have created a Pull Request to solve this issue.

Because React is a one-way data flow, it is tricky to pass data between the child component. Similar to this, in this project, the button to switch between White mode and Dark mode is in Navigation component, which is a child of App component. Also, Main component, child component of App, will remain the same even switch between White and Dark mode. Therefore, we need to find a way to notify Main component about the mode switching.

My idea is to create a function in App component to get the data whenever user switch between White and Dark mode:

isDarkTheme = (dark) => {
    this.setState({
      isDark: dark
    })
  }

and pass this variable to Main component to change the className so that whenever user switch to Dark mode, the whole Main component will change to dark too:

<div className={this.props.isDark ? 'main thememain-dark' : 'main thememain-white'}>

This issue is relatively easy but I am happy that I can contribute to a project and hopefully I can fix something bigger than this next week, the last week of Hacktoberfest!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create your website at WordPress.com
Get started
%d bloggers like this: