So, sir, when I transitioned from Vue.js to C#, one of the hardest parts was this component communication issue. In Vue, everything felt more fluid to me, like a flowing river. But when I started with React, things got a bit more… how should I say, more like a ‘puzzle.’ You take many pieces, and try to assemble them into the big picture, it’s just like that. Especially this ‘Props’ thing, it’s just like that puzzle piece. At first, it might seem a little confusing, and I can even say my own program failed 🙂

But basically, the core of the matter is very simple, as they say ‘simple but effective,’ exactly like that. Props is actually a kind of data transfer mechanism. Think of you have a parent component and a child component. The parent wants to tell something or give information to the child. These information packages are called ‘props.’

For example, suppose you want to take a user’s name from the parent component and display it in the child component. That’s where props come into play. The parent component bundles its data and sends it by saying ‘here you go, use this.’ It’s that simple.

So, how does this happen? Let’s get into some technical details. In the parent component, you assign the data you want to send to a variable. Then, when you call the child component, you pass this variable as an ‘attribute.’ That passing thing is called a ‘prop.’

Now, let’s look at an example code. Suppose we have a UserProfile component and we want to get its name and age from somewhere else. It’s like when you register on a site and enter your name, surname, and then see those details elsewhere. It’s just like that.

First, let’s create our parent component. This parent component will hold the user’s details:

// ParentComponent.js import React from 'react'; import UserProfile from './UserProfile'; // import the UserProfile component

function App() { const userName = “Ali Veli”; const userAge = 30;

  return (     
       
Welcome!
       {/* Call UserProfile component and pass data as props */}            
   ); }

In this App component, we have two variables: userName and userAge. When calling the UserProfile component, we pass them with the names name and age. It’s like key-value pairs, exactly like that. We assign userName to the name key and userAge to the age key.

Now, let’s see how this UserProfile component will use this incoming data:

// UserProfile.js import React from 'react';

function UserProfile(props) { // Receive props object // Extract desired data from props const { name, age } = props;

  return (     
       
User Profile
       
Name: {name}
       
Age: {age}
     
   ); }

As you can see, the UserProfile component takes a props object. From this object, we extract the name and age properties and can use them directly. Isn’t that nice? So, data from the parent component can be directly used in the child component. This is the fundamental way of component communication.

Now, let’s move on to the part I love most: What happens if you make a mistake? 🙂 Suppose in the UserProfile component, you forget to extract props or call it with the wrong key. For example, you send it as userName but in the UserProfile component, you look for name:

// Wrong usage example (in App.js) // ...  // sent as 'userName' instead of 'name' // ...

What will happen here? Do you know? The UserProfile component expects a name prop, so it will ignore the userName prop. As a result, on the screen, ‘Name: ‘ will be printed, but nothing will appear after it because the name prop is missing. It’s like trying to deliver something urgently somewhere but forgetting a detail, and then saying ‘why didn’t it work?’ That was exactly one of the first things I experienced.

Ultimately, props are a wonderful way to handle data flow. There is a unidirectional flow from parent to child. So, the child cannot directly send data back to the parent. If you need to do that, you’d need callback functions or other methods, but that’s another topic.

By the way, props are one of React’s fundamental building blocks. When you understand this well, your components will be more dynamic and reusable. Sometimes, you want to use a code snippet in different places; props make that possible. For example, you create a Button component, and you pass a text prop to change the button text; or you create a Card component, and inside you pass title and description props, making each card different. Even an experienced developer like me with over 40 years still finds this exciting 🙂

In conclusion, props are the primary and most common way to transfer data from a parent component to a child component. They’re simple but become very powerful when used correctly. It’s like assembling the pieces of a puzzle, each part fulfilling its role to create a beautiful whole. Of course, at first, it may require some practice, but with time, you’ll get accustomed to it.

Recently, I went on a camping trip with my spouse and our child. Sitting around the fire in the evening, I thought about the props thing. I said, isn’t life just like props? As parents, we pass our experiences and knowledge to our children. Of course, our life is not coding with strict rules but more about love and values. But in the end, it’s an act of transfer. Our children will build their own ‘components’ in life using these pieces of information. Isn’t that wonderful? Sometimes, even the most complex technical topics become clearer with an example from daily life. Anyway, that’s all for now. See you in the next post!