Lesson 4

Propelling Through React: Methods, Props, and Nesting Functional Components

Topic Overview and Actualization

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!

What Are Methods, and How Do We Define Them in React?

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:

1const Spaceship = () => { 2 const startThrusters = () => { 3 console.log("Thrusters are ON"); 4 } 5 return ( 6 <button onClick={startThrusters}>Start Thrusters</button> 7 ); 8}
Using Methods in Functional Components

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?

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}
Nesting Functional Components

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:

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!

Passing Primitive Data Types as Props

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:

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}
Passing Methods as Props

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

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.

Destructuring Props in Function Signature

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:

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!

Lesson Summary and Practice

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!

Enjoy this lesson? Now it's time to practice with Cosmo!

Practice is how you turn knowledge into actual skills.