Stateful and Stateless

There are a couple of things we need to do now.

We need to write two components, one of them is called stateful (aka the smart/dynamic component) and the second one is stateless (aka the dumb/dummy/static component).

Can you guess which is which?

Stateless — Always returns the same output. Component where data “flows” inside. Mostly used for representing something. Does not include the state, only props!

Stateful — Has some activity and the component has an internal state. Examples of activity: data fetching, user interaction (for example button clicks), and data passing.

Hopefully that didn’t sound too complicated, it’s a really simple concept.

Let’s write the backbone for the two components.

Notice how one of the components is class based and the second is not?

The class based component will carry the state. Why do we need state? We need state, so we can save what’s happening with our dynamic application.

Think about it. If a user clicks a button, how does the app know what to do next? Before clicking, we have a default state. After the user clicks the button, we change the state to represent what will happen next.

Example:

We have a counter with a starting number at zero. The initial state is zero. The user clicks on the button. How are we going to fit the pieces together, and more importantly, increment or decrement the number?

We need some kind of dynamic mechanism to represent our actions, and convert it into representational feedback/data. We call it State. Once you use state — you can’t live without it.

Back to building the app. Take a look at the NASA astronomy picture of the day endpoint.

Make sure you look at the URL, and change the api_key= to your personal key.

NASA data

We need to somehow fetch the data. Lucky for us this is relatively easy.

Go to the root of your project and install Axios.

npm i axios

I’ll show you some code now. Try to understand it — I will explain it below.

Don’t forget to replace the API key with your personal one.

We import axios We call the constructor() method where we initialize our state. The initial state is just an empty array. We call a lifecycle called componentDidMount and inside the lifecycle method we declare our END_POINT and API_KEY constants. Inside the componentDidMount method we call a GET request with axios . Axios returns a promise, and inside that promise we have access to the data. The data is under response.data .

If you open the browser console you should be able to see the response.

We’re almost there. Now we need to save the response to the current state.

We call the setState() method and pass in our state object.

If we console.log() our state, we should see the data! One last step with the current component, we also need to pass this state down to our child/stateless component.

We pass the AstronomyCard a prop as our state. I’ve included fancy little object destructuring.

So how do we use the parent data inside our sibling? Turns out, it’s not hard — React is easy and intuitive to work with.

We have access to the data under props.data in our sibling. What I’m doing is deconstructing the object, so we don’t have to write out the long props each time. Instead of props.data.title we can write {title} .

One last thing. Grab the styles here and place them in src/assets/stylesheets/styles.scss

Let’s take look at our app.

Not too overwhelming, but we definitely got a lot done today. There is so much more you can do with this API — here is the full list of endpoints — feel free to experiment.

Our next goal will be refactoring using Redux, which will be covered in the next chapter. Redux is complicated and I will dedicate a full chapter just for Redux.