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:

JavaScript
Copy to clipboard
1const Spaceship = () => {
2  const startThrusters = () => {
3    console.log("Thrusters are ON");  
4  }
5  return (
6    <button onClick={startThrusters}>Start Thrusters</button>  
7  );
8}

An advantage of methods is they can handle virtually any type of event, ranging from a simple mouse click, to more elaborate ones such as form submissions, providing a React component with dynamic functionality.

Let's extend the functionality of our spaceship. How about we add a method that checks the spaceship's fuel level?

JavaScript
Copy to clipboard
1const Spaceship = () => {
2  const fuelStatus = () => {
3    let fuelLevel = 70; // in percentage
4    if (fuelLevel > 50) {
5      return "Fuel Status: Good";
6    } else {
7      return "Fuel Status: Low";
8    }
9  };
10  return (
11    <h3>{fuelStatus()}</h3>
12  );
13}

Sometimes, a component might be designed to exist within another component. This is called "nesting". In our spaceship example, the thruster could be seen as a component nested within our spaceship component:

JavaScript
Copy to clipboard
1const Thruster = () => {
2  return (
3    <p>Thruster is ready!</p>  
4  );
5}
6
7const Spaceship = () => {
8  return (
9    <div>
10      <Thruster />
11    </div>
12  );
13}

Great! Now our spaceship has thrusters!

Now that the thruster is in place, how can we control it from the spaceship? Here's where props come into play. Props allow us to pass values between components. Let's pass a message — a data prop — from our Spaceship to our Thruster:

JavaScript
Copy to clipboard
1const Thruster = (props) => {
2  return (
3    <p>{props.status}</p>  
4  );
5}
6
7const Spaceship = () => {
8  let thrusterStatus = "Thrusters are functional!";  
9  
10  return (
11    <div>
12      <Thruster status={thrusterStatus} />
13    </div>
14  );
15}

Beyond data, we can pass methods as props in React. This is especially useful when coordinating between components. Let's illustrate this concept:

JavaScript
Copy to clipboard
1const Thruster = (props) => {
2  // The Thruster makes use of the method passed as a prop
3  return (
4    <div>
5      <p>{props.status}</p>
6      <button onClick={props.startThrusters}>Start Thrusters</button>
7    </div>
8  );
9}
10
11const Spaceship = () => {
12  let thrusterStatus = "Thrusters are functional!";
13  
14  // Our method 'startThrusters' is defined in the 'Spaceship' component
15  const startThrusters = () => {
16    console.log("Thrusters are ON");
17  }
18
19  // We pass `startThrusters` method to the 'Thruster' component as a prop
20  return (<div><Thruster status={thrusterStatus} startThrusters={startThrusters} /></div>);
21}

In this example, the Thruster can now use the startThrusters method that's actually defined in the Spaceship component. When the button in the Thruster component is clicked, it will call startThrusters, and print "Thrusters are ON" to the console.

You might have noticed that accessing props repeatedly can result in repetitive code. In JavaScript, we have a neat language feature to simplify this: destructuring assignment. This lets us unpack properties from objects or arrays right in our function signature.

What if we analysed the engine status in our Thruster? Say our parent Spaceship component passes an engineStatus prop, we can access it directly by destructuring it from props:

JavaScript
Copy to clipboard
1// Before destructuring
2const Thruster = (props) => {
3  console.log(props.engineStatus);
4  //...
5}
6
7// After destructuring
8const Thruster = ({engineStatus}) => {
9  console.log(engineStatus);
10  //...
11}

You can see how much cleaner the destructuring version is. Now, we can access engineStatus directly, without having to write props. each time!

React and JavaScript provide many such tools to write clean and efficient code. As you continue exploring, you'll discover and master these. Now, let's continue with our functional components!

Great job! Today, we've deepened our understanding of how to use methods in functional components, how to nest components, and how to pass both primitive data and methods as props — all of which are crucial skills in your React journey.

Exciting practice activities are coming next. Remember that the key to becoming a skilled React developer lies in practice and experimentation. Brace yourself, because next up are real-life activities based on the concepts you've learned today!