Hello there, adventure-loving coder!

Today is a big day, where we venture deeper into the fascinating cosmos of React, an immensely popular JavaScript library used for creating modern user interfaces. On today's journey, we'll focus on understanding and applying methods, nesting functional components, and passing primitive data and methods as props.

Here's a refresher on some basics. A functional component in React is a JavaScript function that accepts props (short for properties) as an argument and returns a React element.

Imagine building a starship, where each functional component represents a different part, such as the thrusters or the cockpit. In our cockpit (which we'll regard as a functional component), we will define methods that act as controls for the thrusters. With props, we can pass control from the cockpit to the thrusters. Fascinating, isn't it?

Let's break it down!

Methods in JavaScript are actions associated with an object. They are blocks of code that perform specific tasks. These methods are defined inside of a functional component before the return statement, as shown below: