freeCodeCamp Pomodoro Clock 02: Lifting State Up and React Props

This is the third installment of a tutorial series where I cover the freeCodeCamp Pomodoro Clock project. Read the last installment if you missed it.

For those of you who like to learn using video, I’ve also created a video to complement this blog post:

Goals

By the end of this tutorial, you should:

understand when to lift state up into a parent component
understand how to lift state up into a parent component
use props to pass data from a parent component to a child component
Format [Moment durations] using moment-duration-format

To achieve these goals, we’ll:

Create a TimeLeft component that will display the time left in MM:SS format in the current session or break.

Lifting State Up And React Props

We want to add a component named TimeLeft to our App component that will display the time left in the current session or break. The value of TimeLeft will be initialized to either sessionLength or breakLength, which currently reside in the Session component and Break component, respectively. Diagram of the current app state Unfortunately, we cannot share data amongst sibling components. Specifically, in our case, that means that, since Session, Break and TimeLeft components are all children of App (thus considered siblings), TimeLeft cannot currently access sessionLength or breakLength to initialize its value: However, React does allow data to be passed from a parent component to its children. Specifically, in our case, we can lift sessionLength and breakLength up to the App component (hence the name lift state up) and pass it down to Session, Break and TimeLeft: Now that we know why we need to lift state up, let’s get to some code.

We’ll begin by lifting the state up and passing sessionLength and breakLength as props to the Session and Break components, respectively. After we make these changes, the app should work just as it did before with our state now moved into the App component.

Let’s start with the Session component. In Session.jsx, cut all the code that uses sessionLengthInSeconds and paste it into App.js (don’t forget to import useState in App.js. That is, the state and its modifiers (increment / decrement):

1// App.js
2import React, {
3  useState
4} from "react";
5import "./App.css";
6import Break from "./components/Break";
7import Session from "./components/Session";
8
9function App() {
10  const [
11    sessionLengthInSeconds,
12    setSessionLengthInSeconds
13  ] = useState(60 * 25);
14
15  const decrementSessionLengthByOneMinute = () => {
16    const newSessionLengthInSeconds =
17      sessionLengthInSeconds - 60;
18    if (
19      newSessionLengthInSeconds < 0
20    ) {
21      setSessionLengthInSeconds(0);
22    } else {
23      setSessionLengthInSeconds(
24        newSessionLengthInSeconds
25      );
26    }
27  };
28  const incrementSessionLengthByOneMinute = () =>
29    setSessionLengthInSeconds(
30      sessionLengthInSeconds + 60
31    );
32
33  return (
34    <div className="App">
35      <Break />
36      <Session />
37    </div>
38  );
39}
40
41export default App;

1// Session.jsx
2import moment from "moment";
3import React from "react";
4
5const Session = () => {
6  const sessionLengthInMinutes = moment
7    .duration(
8      sessionLengthInSeconds,
9      "s"
10    )
11    .minutes();
12  return (
13    <div>
14      <p id="session-label">
15        Session
16      </p>
17      <p id="session-length">
18        {sessionLengthInMinutes}
19      </p>
20      <button
21        id="session-increment"
22        onClick={
23          incrementSessionLengthByOneMinute
24        }
25      >
26        +
27      </button>
28      <button
29        id="session-decrement"
30        onClick={
31          decrementSessionLengthByOneMinute
32        }
33      >
34        -
35      </button>
36    </div>
37  );
38};
39
40export default Session;

You should see red squiggles in Session.jsx at the moment. Our IDE (editor) is telling us that it has no clue what the variables sessionLengthInSeconds, incrementSessionLengthByOneMinute, decrementSessionLengthByOneMinute are. We’ll pass these variables from App.js into Session.jsx using props:

1// App.js
2import React, {
3  useState
4} from "react";
5import "./App.css";
6import Break from "./components/Break";
7import Session from "./components/Session";
8
9function App() {
10  const [
11    sessionLengthInSeconds,
12    setSessionLengthInSeconds
13  ] = useState(60 * 25);
14
15  const decrementSessionLengthByOneMinute = () => {
16    const newSessionLengthInSeconds =
17      sessionLengthInSeconds - 60;
18    if (
19      newSessionLengthInSeconds < 0
20    ) {
21      setSessionLengthInSeconds(0);
22    } else {
23      setSessionLengthInSeconds(
24        newSessionLengthInSeconds
25      );
26    }
27  };
28  const incrementSessionLengthByOneMinute = () =>
29    setSessionLengthInSeconds(
30      sessionLengthInSeconds + 60
31    );
32
33  return (
34    <div className="App">
35      <Break />
36      {/* pass props below! */}
37      <Session
38        sessionLengthInSeconds={
39          sessionLengthInSeconds
40        }
41        incrementSessionLengthByOneMinute={
42          incrementSessionLengthByOneMinute
43        }
44        decrementSessionLengthByOneMinute={
45          decrementSessionLengthByOneMinute
46        }
47      />
48    </div>
49  );
50}
51
52export default App;

In Session.jsx, we must accept these props by declaring them as parameters to our functional component:

1// Session.jsx
2import moment from "moment";
3import React from "react";
4
5const Session = ({
6  sessionLengthInSeconds, // this is where we accept the props
7  incrementSessionLengthByOneMinute,
8  decrementSessionLengthByOneMinute
9}) => {
10  const sessionLengthInMinutes = moment
11    .duration(
12      sessionLengthInSeconds,
13      "s"
14    )
15    .minutes();
16  return (
17    <div>
18      <p id="session-label">
19        Session
20      </p>
21      <p id="session-length">
22        {sessionLengthInMinutes}
23      </p>
24      <button
25        id="session-increment"
26        onClick={
27          incrementSessionLengthByOneMinute
28        }
29      >
30        +
31      </button>
32      <button
33        id="session-decrement"
34        onClick={
35          decrementSessionLengthByOneMinute
36        }
37      >
38        -
39      </button>
40    </div>
41  );
42};
43
44export default Session;

If everything was done correctly, the app should work just as it did before. Now, take a few minutes and lift the Break component’s state up by yourself.

All done? App.js and Break.jsx should look as follows:

1// App.js
2import React, {
3  useState
4} from "react";
5import "./App.css";
6import Break from "./components/Break";
7import Session from "./components/Session";
8
9function App() {
10  const [
11    breakLengthInSeconds,
12    setBreakLengthInSeconds
13  ] = useState(300);
14  const [
15    sessionLengthInSeconds,
16    setSessionLengthInSeconds
17  ] = useState(60 * 25);
18
19  const decrementBreakLengthByOneMinute = () => {
20    const newBreakLengthInSeconds =
21      breakLengthInSeconds - 60;
22    if (
23      newBreakLengthInSeconds < 0
24    ) {
25      setBreakLengthInSeconds(0);
26    } else {
27      setBreakLengthInSeconds(
28        newBreakLengthInSeconds
29      );
30    }
31  };
32  const incrementBreakLengthByOneMinute = () =>
33    setBreakLengthInSeconds(
34      breakLengthInSeconds + 60
35    );
36
37  const decrementSessionLengthByOneMinute = () => {
38    const newSessionLengthInSeconds =
39      sessionLengthInSeconds - 60;
40    if (
41      newSessionLengthInSeconds < 0
42    ) {
43      setSessionLengthInSeconds(0);
44    } else {
45      setSessionLengthInSeconds(
46        newSessionLengthInSeconds
47      );
48    }
49  };
50  const incrementSessionLengthByOneMinute = () =>
51    setSessionLengthInSeconds(
52      sessionLengthInSeconds + 60
53    );
54
55  return (
56    <div className="App">
57      <Break
58        breakLengthInSeconds={
59          breakLengthInSeconds
60        }
61        incrementBreakLengthByOneMinute={
62          incrementBreakLengthByOneMinute
63        }
64        decrementBreakLengthByOneMinute={
65          decrementBreakLengthByOneMinute
66        }
67      />
68      <Session
69        sessionLengthInSeconds={
70          sessionLengthInSeconds
71        }
72        incrementSessionLengthByOneMinute={
73          incrementSessionLengthByOneMinute
74        }
75        decrementSessionLengthByOneMinute={
76          decrementSessionLengthByOneMinute
77        }
78      />
79    </div>
80  );
81}
82
83export default App;

1// Break.jsx
2import moment from "moment";
3import React from "react";
4
5const Break = ({
6  breakLengthInSeconds,
7  incrementBreakLengthByOneMinute,
8  decrementBreakLengthByOneMinute
9}) => {
10  const breakLengthInMinutes = moment
11    .duration(
12      breakLengthInSeconds,
13      "s"
14    )
15    .minutes();
16  return (
17    <div>
18      <p id="break-label">Break</p>
19      <p id="break-length">
20        {breakLengthInMinutes}
21      </p>
22      <button
23        id="break-increment"
24        onClick={
25          incrementBreakLengthByOneMinute
26        }
27      >
28        +
29      </button>
30      <button
31        id="break-decrement"
32        onClick={
33          decrementBreakLengthByOneMinute
34        }
35      >
36        -
37      </button>
38    </div>
39  );
40};
41
42export default Break;

TimeLeft Component

Great, we’re ready to create our TimeLeft component and initialize its value.

In your components directory, create and export an empty component named TimeLeft. Then, import this component in App.js and render it between <Break /> and <Session />.

Now, that you’ve done that, pass sessionLengthInSeconds (we’ll use it to initialize the timeLeft in our TimeLeft component) from the App component to the TimeLeft component.

Lastly, accept these props in TimeLeft. Use the sessionLengthInSeconds prop to initialize a new state (remember useState?) variable called timeLeft. Render out timeLeft in a <p> tag with the id “time-left”.

You should be able to all this by yourself with everything you’ve learned up to this point in this tutorial series. I strongly suggest you stop here and try all this yourself before going on and seeing the answer below.

Here’s what that looks like:

1// components/TimeLeft.jsx
2import React from "react";
3import { useState } from "react";
4
5const TimeLeft = ({
6  sessionLengthInSeconds
7}) => {
8  const [timeLeft] = useState(
9    sessionLengthInSeconds
10  );
11
12  return (
13    <p id="time-left">
14      {timeLeft}
15    </p>
16  );
17};
18
19export default TimeLeft;

1// App.js
2import React, {
3  useState
4} from "react";
5import "./App.css";
6import Break from "./components/Break";
7import Session from "./components/Session";
8import TimeLeft from "./components/TimeLeft";
9
10function App() {
11  const [
12    breakLengthInSeconds,
13    setBreakLengthInSeconds
14  ] = useState(300);
15  const [
16    sessionLengthInSeconds,
17    setSessionLengthInSeconds
18  ] = useState(60 * 25);
19
20  const decrementBreakLengthByOneMinute = () => {
21    const newBreakLengthInSeconds =
22      breakLengthInSeconds - 60;
23    if (
24      newBreakLengthInSeconds < 0
25    ) {
26      setBreakLengthInSeconds(0);
27    } else {
28      setBreakLengthInSeconds(
29        newBreakLengthInSeconds
30      );
31    }
32  };
33  const incrementBreakLengthByOneMinute = () =>
34    setBreakLengthInSeconds(
35      breakLengthInSeconds + 60
36    );
37
38  const decrementSessionLengthByOneMinute = () => {
39    const newSessionLengthInSeconds =
40      sessionLengthInSeconds - 60;
41    if (
42      newSessionLengthInSeconds < 0
43    ) {
44      setSessionLengthInSeconds(0);
45    } else {
46      setSessionLengthInSeconds(
47        newSessionLengthInSeconds
48      );
49    }
50  };
51  const incrementSessionLengthByOneMinute = () =>
52    setSessionLengthInSeconds(
53      sessionLengthInSeconds + 60
54    );
55
56  return (
57    <div className="App">
58      <Break
59        breakLengthInSeconds={
60          breakLengthInSeconds
61        }
62        incrementBreakLengthByOneMinute={
63          incrementBreakLengthByOneMinute
64        }
65        decrementBreakLengthByOneMinute={
66          decrementBreakLengthByOneMinute
67        }
68      />
69      <TimeLeft
70        sessionLengthInSeconds={
71          sessionLengthInSeconds
72        }
73      />
74      <Session
75        sessionLengthInSeconds={
76          sessionLengthInSeconds
77        }
78        incrementSessionLengthByOneMinute={
79          incrementSessionLengthByOneMinute
80        }
81        decrementSessionLengthByOneMinute={
82          decrementSessionLengthByOneMinute
83        }
84      />
85    </div>
86  );
87}
88
89export default App;

Well done! If you did everything correct, the TimeLeft component should render out the time left…but in seconds. We should format this in MM:SS format, as per the freeCodeCamp spec. But how? 🤔

Formatting Moment Durations to MM:SS Format

To format Moment durations, we’ll use the moment-duration-format plugin. First, let’s install the package:

1npm install moment-duration-format

To “plug in” the plugin, do the following in TimeLeft.jsx:

1// TimeLeft.jsx
2import moment from "moment";
3import momentDurationFormatSetup from "moment-duration-format";
4import React from "react";
5import { useState } from "react";
6
7momentDurationFormatSetup(moment);
8// ... the rest of your component here

With that done, we’re ready to format the component. As per the moment-duration-format documentation, we’ll simply create a duration from timeLeft, add call the format() function with a format string argument and render out the return value:

1// TimeLeft.jsx
2import moment from "moment";
3import momentDurationFormatSetup from "moment-duration-format";
4import React from "react";
5import { useState } from "react";
6
7momentDurationFormatSetup(moment);
8
9const TimeLeft = ({
10  sessionLengthInSeconds
11}) => {
12  const [timeLeft] = useState(
13    sessionLengthInSeconds
14  );
15
16  const formattedTimeLeft = moment
17    .duration(timeLeft, "s")
18    .format("mm:ss");
19  return (
20    <p id="time-left">
21      {formattedTimeLeft}
22    </p>
23  );
24};
25
26export default TimeLeft;

Note that moment.duration(timeLeft, ’s’) is almost identical to the code we have in Break.jsx and Session.jsx. It simply creates a Moment duration. The only new part of this is the format function and the format template string argument.

👏 You Made It! 👏

You’ve taken steps towards completing the freeCodeCamp Pomodoro Clock project and now know how to pass props to components and lift state up.

If you enjoyed this tutorial, follow me on:

If at any point you got stuck in this tutorial, please review the code on GitHub.

If you are interested in the freeCodeCamp Random Quote Machine implementation, please take a look at my videos on YouTube.

freeCodeCamp Pomodoro Clock 02: Lifting State Up and React Props