Understanding Props in React: A Comprehensive Guide

Hi besties! Today we will talk about Props aka Properties.

So what are props?

Props are a way to pass data to a component. They allow the components to be dynamic and customizable.

They are different from displaying the same static content.

We would pass one argument, props, that would represent an object that held all the data passed to the component in one place. In the component, we would access the props as we access any passed parameters.

Greeting.jsx

const Greeting = (props) => {
  console.log(props);
};

Since props is an object, we can access the properties of that object.

Greeting.jsx

const Greeting = (props) => {
  console.log(props.name);
};

We can also use props inside JSX!

When you’re using JavaScript inside JSX, you need to put the JavaScript inside the curly braces.

Greeting.jsx

const Greeting = (props) => {
  return <h1>Hi, {props.name}!</h1>;
};

And to pass a property to a component, you need to add it as an attribute in the component’s tag―similar to setting attributes in HTML.

index.jsx

import React from "react";
import { createRoot } from "react-dom/client";
import Greeting from "./Greeting";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(<Greeting name = "Eve"/>);

So, to put together of what we just did:

index.html

<html>
 <head>
  <script type="module" src="./index.js"></script>
 </head>
 <body>
  <div id="root"></div>
 </body>
</html>

index.jsx

import React from "react";
import { createRoot } from "react-dom/client";
import Message from "./Message";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(<Message text="Welcome to the Matrix" />);

Message.jsx

import React from "react";

const Message = (props) => {
  return <h1>{props.text}</h1>;
};

export default Message;

Thus, the method to access the value of a property passes as a prop in a React components is: props.propertyName.

Reminder:

You’re not limited to only passing one property. If we want to pass multiple properties, you can do so.
If you pass multiple properties, they become part of the props object which would allow you to access each one through it.

Greeting.jsx

import React from "react";

const Greeting = (props) => {
console.log(props);
  return (
    <div>
      <h1>Hi, {props.name}!</h1>
      <p>You're from {props.location}.</p>
    </div>
  );
};

export default Greeting;

You can also pass other types as properties as well such as numbers. If you are passing a non-string such as numbers, you need to wrap the value in curly braces {}
When you’re accessing a passed property, the type doesn’t matter whether it is a number or a string as long as you access them all by their key. Passing booleans also work similarly.

App.jsx

import React from "react";
import Greeting from "./Greeting";

const App = () => {
  return (
    <div>
      <img src="https://mimo.app/i/earth.png" />
      <Greeting name="Adam" location="Eden" age={ 69 } />
    </div>
  );
};

export default App;

However, keep in mind that you cannot render a boolean directly as a strong in React. You won’t be able to see anything if you try to render a boolean value directly.
So, if you want to render a boolean (or a number) as a string, you can use the String(value) to convert a given variable called value to a string.

Greeting.jsx

import React from "react";

const Greeting = (props) => {
  return (
    <div>
      <h1>Hi, {props.name}!</h1>
      <p>You're from {props.location}.</p>
      <p>You're {props.age} years old.</p>
      <p>Are you nice? { String (props.nice) }</p>
    </div>
  );
};

export default Greeting;

Anyways, that’s all for today! See you next on Buttons with React 😝💋

Implementing Dark Mode in React

We have previously talked about useState before. A great way to create CSS classes on the fly is to use state variable! Here is an example of how to create Dark Mode in React by using string interpolation to construct the individual classes based on the state variable mode. index.html index.jsx App.jsx App.css So, if…

January 29, 2025
Understanding React’s useState Hook

Buttons To use buttons, you can add the onClick event handler to handle clicks on the button. React also follows the camelCase unlike HTML/JavaScript; and to run the JavaScript, you add an embedded expression. App.jsx You can also run JavaScript directly inside the embedded expression. However, it is executed without clicking the button because the function is…

January 21, 2025
Understanding Props in React: A Comprehensive Guide

This content explains the concept of props in React, which allow data to be passed to components, making them dynamic. It covers how to access props as objects, pass multiple properties, and handle different data types. The importance of correctly rendering non-string values and using props in JSX is emphasized.

January 17, 2025
The Power of JSX: Combining HTML and JavaScript

JSX is a syntax extension for JavaScript that resembles HTML, used primarily in React to create components. It allows developers to write HTML-like code within JavaScript, enhancing readability and enabling dynamic web applications. With JSX, one can embed JavaScript expressions, making the integration of logic and UI layout seamless.

January 12, 2025
Organizing React Components for Better Code

The content discusses best practices for organizing React components in separate files for maintainability. It details the process of importing React, creating functional components, and exporting them. Additionally, it covers returning multiple elements and using named vs. default exports, emphasizing strategic organization for better code management.

January 11, 2025
Step-by-Step Guide to Rendering React Components

The content provides a step-by-step guide on rendering components in React. It emphasizes creating and linking HTML and JavaScript files, setting up the main component, and utilizing the createRoot function to manage rendering. The author injects humor while guiding readers through the essential concepts of React component rendering.

January 10, 2025
Introduction to React: Understanding the Basics

React is a JavaScript library for creating single-page web applications that dynamically update without page reloads. It organizes code into reusable components, akin to functions returning HTML-like JSX. This enhances development efficiency, as components can be reused, resembling custom HTML tags. Overall, React simplifies coding while improving functionality.

January 10, 2025
HTML Structure Explained: A Beginner’s Guide

The content discusses HTML, the foundational markup language for web development. It highlights its structure, including elements like tags and attributes. The post humorously reflects on the author’s learning journey while encouraging newbies by simplifying concepts like nesting elements and the importance of HTML in web design. It concludes with code examples.

January 9, 2025
Why Use Pure Functions in React Components?

Pure functions in JavaScript are self-contained and produce consistent results without affecting external variables or objects. They enhance clarity and maintainability in code, minimizing bugs. Unlike impure components that modify existing variables, pure components receive data as props. Understanding component relationships, like the React render tree and module dependency tree, further optimizes performance and structure.

January 9, 2025
React Components Explained: A Guide for Developers

This post analyzes React components, highlighting their crucial role in creating dynamic user interfaces. It details the types of components, including functional and class components, and explains props and state. Additionally, it covers lifecycle methods and emphasizes the importance of reusability and composition in building complex applications effectively.

January 8, 2025

Understanding Props in React: A Comprehensive Guide

So what are props?

Reminder:

Implementing Dark Mode in React

Understanding React’s useState Hook