DEV Community

Kosi Iyiegbu
Kosi Iyiegbu

Posted on

React Components and Props

Introduction

Component in React are the building blocks of an application. They are reusable code blocks that can be used to build pieces of the UI instead of putting everything under one single file. Also, a component can have other aspects such as states, props, etc.

There are two types of components in React:

  1. Class Components
  2. Functional Components

Let's look at each one now.

Class Components

As the name suggests, a class component is a JavaScript class extended to a React Component. It has a mandatory render() method that returns a JSX element. React was mostly class-based earlier on, so we needed class components for managing states.

This is how it looks:

import React, { Component } from "react";

class App extends Component {
  render() {
    return (
      <h1>Hello World</h1>
    );
  }
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Class components aren't really used anymore with the introduction of React hooks. Most professionals recommend using functional components these days.

Functional Components

A functional component is just a regular JavaScript function that returns a JSX element as well but it doesn't use the render() method.

export default function App() {
  return (
   <h1>Hello World</h1>
   );
}
Enter fullscreen mode Exit fullscreen mode

The code above is a functional component that returns a JSX element. Functional components are more easily readable than class components as you can see. It it also easier to work with functional components because class components can be more complex. With the introduction of React hooks, "state" could now be declared in functional components.

Props In React

An important concept of components is how they communicate. React has a special object called props, which means property. It is used to pass data from a parent component to a child component. Props only transport data in a one-way flow, from parent to child component.

Let's look at the use of props in class components, We'll look at a very simple example:

import React from "react";

export class Student extends React.Component {
  render() {
   return (
    <h1>Hello, {this.props.name}</h1>
   );
 }
}
Enter fullscreen mode Exit fullscreen mode

In the code above, we are creating a Student Component that will return the following h1 tag with whatever name property that is passed to it. We will need to import the component into the parent component that is the App.js file and pass the data to it.

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

export default class App extends React.Component {
 render() {
  return (
   <div className="App">
    <Student name="Rex" />
   </div>
  );
 }
}
Enter fullscreen mode Exit fullscreen mode

This would return a simple h1 tag with the name property that was passed to the component as seen below.

Class Component Prop

Now let's look at how to use props in functional components.

import React from "react";

export default function Student({firstName, lastName}) {
  return (
    <div>
      <h1>First Name: {firstName}</h1>
      <h2>Last Name: {lastName}</h2>
    </div>
  );
} 
Enter fullscreen mode Exit fullscreen mode

As you can see, we destructured the props that we want to pass from the parent component.

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

function App() {
  return (
    <div className="App">
      <Student firstName="John" lastName="Doe" />
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

After passing the props we want in our App.js file what would be rendered will look like this:

functional component props

Conclusion

We've seen how to pass props between components and why functional components are preferred to class components. Props are useful for passing data but not for manipulating it.

Thank you for Reading!

Discussion (7)

Collapse
lukeshiru profile image
Luke Shiru

A few things to consider:

  • Nowadays, folks don't use class components in React unless they are building an ErrorBoundary, and even then there are functional solutions out there in npm.
  • You don't need to import react when working with CRA:
// Student.jsx
export const Student = ({ firstName, lastName }) => (
    <div>
        <h1>First Name: {firstName}</h1>
        <h2>Last Name: {lastName}</h2>
    </div>
);

// App.tsx
import { Student } from "./Student";

export const App = () => (
    <div className="App">
        <Student firstName="John" lastName="Doe" />
    </div>
);
Enter fullscreen mode Exit fullscreen mode
  • You might want to add prop spreading in an article about React props (classic ...props) which makes the usage of props way more powerful.
  • You also might want to use JSDocs to make DX better for you and others:
/**
 * @type {import("react").FC<{
 *  firstName: import("react").ReactNode;
 *  lastName: import("react").ReactNode;
 * }>}
 */
export const Student = ({ firstName, lastName }) => (
    <div>
        <h1>First Name: {firstName}</h1>
        <h2>Last Name: {lastName}</h2>
    </div>
);

// Or you can also just use TypeScript:
import type { FC, ReactNode } from "react";

export const Student: FC<{
    firstName: ReactNode;
    lastName: ReactNode;
}> = ({ firstName, lastName }) => (
    <div>
        <h1>First Name: {firstName}</h1>
        <h2>Last Name: {lastName}</h2>
    </div>
);
Enter fullscreen mode Exit fullscreen mode

That way folks using the Student component will get autocompletion for the properties, and they'll get an error if they don't pass them.

Cheers!

Collapse
killerkvothe117 profile image
Kosi Iyiegbu Author

Thanks for this

Collapse
julrich profile image
Jonas Ulrich

Those are all super valid and important additions! ☝️

Collapse
gaurisinghbisht profile image
GauriSinghBisht

Short and nice

Collapse
thekillerrex27 profile image
TheKillerRex27

I like this

Collapse
israelchidera profile image
Israel Chidera

Comprehensive. Well-done

Collapse
killerkvothe117 profile image
Kosi Iyiegbu Author

Thank you