Please assist me by explaining some inexplicable lines of code in two react projects

JavaScript
1

Hi,

Please could someone assist me? I was reviewing the code for two fully functioning react projects and some parts of the code simply did not make sense to me.

The first project is this codepen link: a 25 + 5 clock app for a 25 + 5 clock app someone posted on this forum. The challenge I have understanding this code is in lines 95 to 104 of the javascript code. Specifically the code below:

this.setState({
        timing: setInterval(() => {
          if(this.state.remainingSeconds === 60){
            this.setState({
              remainingMinutes: this.state.remainingMinutes - 1,
            })
          }
          this.setState({
            remainingSeconds: this.state.remainingSeconds - 1,
          })

The problem I have is that this part of the code is where the countdown of the timer for this 25 + 5 clock happens. Yet the "if"condition for the countdown states that the state variable, this.state.remainingSeconds, must equal 60 and two specific decrement actions for this.state.remaininingMinutes and remainingSeconds using setState should occur. The question is when will the decrement action for further countdown of remainingSeconds occur (ie for when remainingSeconds is less than 60, or is 25 for example) since from this code, decrement/countdown is supposed to occur only when remainingSeconds === 60 ? However, if you place print statements inside the if statement to print the values of remainingMinutes and remainingSeconds when the timer is running, it will print the correct first decremented value for remainingMinutes (i.e the first value after decrement at remainingSeconds === 60) and the correct first decremented value for remainingSeconds (i.e the first value after decrement at remainingSeconds === 60, which is 59), it will then continue to print this same value of remainingMinutes, until remainingSeconds is once again 60 (at which time it will correctly decrement remainingMinutes once again) and will continue to print a decremented value of remainingSeconds until it becomes 0 and the next 60 loaded (at which the next printed decremented remainingSeconds value is 59 and the decrement cycle for remainingSeconds continues). That is, in other words the correct countdown of remainingMinutes and remainingSeconds occurs, even though looking at this code, you would not expect the code or project to behave well. So I would really like someone to explain this code behaviour to me, as I have even checked the code file to see if there were any hidden code somewhere that could explain this, but all to no avail.

The second react project is this react-redux project that has this codepen and title: Building your first react redux application . This project is a react app that adds an attendeeā€™s details (name and favorite color) to a displayed list through an input form. At default, there is an initial attendeeList variable that holds some default attendee details that are displayed when the app initially loads. The challenge I have with this project is that there is a props, addAttendee (line 44 of the javascript code) that is used to receive the attendee details a new attendee enters and submits through the AddAttendee component (line 67), but there is no place I saw any newly entered attendee details added to the attendeeList variable that is used to display the attendee details, however surprisingly on clicking the ā€œAdd Attendeeā€ button, the newly entered attendee details would also be added to the displayed list in the app. However, I donā€™t know whether this(the addition of any newly entered attendees details to the attendeeList for immediate display) could be somehow explained by this code below (from line 157 ):
const store = createStore(reducer, attendeeList);.
Also, this is further complicated by the fact that most of the store variables created or used in the freecodecamp tutorials had a single argument (the reducer) for the createStore method assigned to the store variable, making it difficult for me to understand the role of this line of code in the project.

Please I would really appreciate it, if someone could take a look at these two codepen links and explain these inexplicable behaviours to me, as I believe the knowledge would greatly enrich my react knowledge ,understanding and code review skills. I also want to add that when I did my 25 + 5 app FCC project (see the link here: My 25 + 5 clock app ), I used the condition ā€˜if( seconds > 0)ā€™ to handle the continuous decrement actions for countdown of the seconds aspect, which took care of the issue I mentioned in the first project.

Thank you.

2

Please could someone help me by working on my request, as I really want to understand this code?

3

First off, when asking a question try to be way more succinct about it. Condense it down to the bare minimum for the actual question.

You have a wall of text with no paragraph breaks. Most people when they see that are often not even going to bother to read the question. We have to dig through the wall of text just to find the actual question.

Having said that, I may not have understood either of your questions, but anyway.

  1. If the remainingSeconds is 60 decrement the remainingMinutes otherwise decrement remainingSeconds. Not sure what else there is to it?

  2. I donā€™t think I understand the question. There is a handleSubmit method that is triggered on form submit, it gets the input values using refs and calls addAttendee. The mapDispatchToProps function is using bindActionCreators which wraps the action creator into a dispatch call (which is maybe what is hiding the dispatch from you?).

bindActionCreators

Turns an object whose values are action creators, into an object with the same keys, but with every action creator wrapped into a dispatch call so they may be invoked directly.

4

Thank you for taking the time to respond to my mail and please I am so sorry for putting you out.

As to the second question, please donā€™t worry about it, as I have finally understood it on my own after studying and restudying it for more hours and googling up on redux. My initial confusion was due to the fact that I was still not very clear on react-redux.

As to the first question, I just realised I made a perception error and it was your answer that showed me my error. The mistake stemmed from the poorly indented way (for lack of a better expression) code is often displayed in codepen (unlike in say visual studio code), so this made me to think that the second setState, the one for remainingSeconds was actually in the if statement , together with the setState for remainingMinutes and of course, if it was , remainingSeconds can never decrement to 0. It was when I read your answer and looked at the properly indented code in the post I made, that I saw my error. Maybe next time, when i am reviewing code in codepen, I should copy it to visual studio code in order to avoid such errors. However, please thanks for your time as I was really confused about how the decrement was occurring.

And thank you for your advice on ways of writing better posts on this forum. Once again, sorry my post was too long as I was just trying to explain things clearly, but it wasnā€™t a deliberate mistake. Thanks.

1 Like
5

Just a sidenote - you can format the code in codepen (thereā€™s a dropdown menu on the upper right of each panel). Often times itā€™s the first thing I do when someone shares a link to codepen.