What are Props in React?

So what exactly are the so-called "props" in reactjs? Well, a simple way to explain it is to think of your phone; what does it do? It allows you to share information to someone else across the globe, either through text or phone call, right?

The same is true for "props" in react. Props enables you to share information between different components in your project, no matter where they may be located.

Now, how do we get started with props? It's quite simple. The sample code below shows you how props work.

In the code sample above, we've imported the <Button /> component into out "App.jsx" file, but now take a closer look, you'll notice we have an attribute passed to it, which is the text "Click me". Why is that? This is how we pass props to components we've called somewhere else (in this case, our "App.jsx" file).

You're probably wondering: "How do we access and use this in our <Button /> component?". This is where "Props" comes in to play. The code below shows you an example of how we can do this.

You'll notice here we're adding props as an argument to the Button component function, but why is that? This is how we'll be able to access the value of the "content" attribute we passed in when we called our <Button /> component in the App.jsx file.

Now we need to get the actual value, and we do this by writing {props.content} in between the <button></button> as you've seen in the code above.

Here's the final result of our little project:

We can see the value of the content attribute is passed in correctly and our button looks normal🥳

This is how "Props" work in react and why they're useful. Thanks for reading, and I'll catch ya'll in the next blog :)