DEV Community

Cover image for A Guide to React Children Props: Star Wars Button Tutorial
Michael J. Larocca
Michael J. Larocca

Posted on • Originally published at selftaughttxg.com

A Guide to React Children Props: Star Wars Button Tutorial

In this article, discover React children props through a Star Wars button tutorial, including icons! Learn about component composition and create reusable, modular components for your unique projects!


TN-TXG-102


Note: We will be focusing on learning React code, not CSS. However, feel free to clone the project or copy the CSS code.


React component composition

To better understand what React children props are, let's first take a look at what a React component composition is. Component composition in React is essential because it allows you to create reusable and modular components by nesting and combining them. This enhances the flexibility of your application's structure, promotes better code maintainability, and simplifies the development process.


React children

React children are a special property in React components that allow you to pass components or elements as children to a parent component. This feature plays a crucial role in composition, as it enables you to create reusable and modular components by nesting and combining them. React children enhance the flexibility of your application's structure and promote better code maintainability.

Using children props in the example below allows you to pass the Font Awesome icons and text as children to the ButtonStarWars component, making it more flexible and reusable for different button content.

<ButtonStarWars>
  <FaRebel />
    Rebel
  <FaRebel />
</ButtonStarWars>
Enter fullscreen mode Exit fullscreen mode

The ButtonStarWars component

I created a ButtonStarWars component that accepts props as an argument. It returns a button element with a class name "sw-button" and renders the content passed through the children prop inside the button.

Utilizing the children props makes it easy to pass in Font Awesome icons and text in between them as shown in the React children code block above.

The component is then exported for use in other parts of the application.

To learn about adding Font Awesome icons to your React project, be sure to check out my How to Integrate Font Awesome Icons into React Applications article.

import React from "react";

function ButtonStarWars(props) {
    return(
        <button className="sw-button ">{props.children}</button>
    )
}

export default ButtonStarWars;
Enter fullscreen mode Exit fullscreen mode

Exploring the App Component

Now that we created the ButtonStarWars component we can render multiple buttons which include icons from the React Icons library.

The App function component returns a JSX structure containing a header and main section. Within the main section, several ButtonStarWars components are used, with each instance featuring unique icon and text combinations. These icons and text are passed as children to the ButtonStarWars component, showcasing the flexibility and reusability of React children props in action!

import './App.css';
import ButtonStarWars from './components/ButtonStarWars';
import { FaEmpire, FaRebel, FaMandalorian, FaJournalWhills, FaJediOrder, FaSith } from 'react-icons/fa';
import { GiDeathStar } from 'react-icons/gi';

function App() {
  return (
    <>
      <header>
        <h1>Creating Reusable React Buttons with Props.Children</h1>
      </header>
      <main>
        <div>
          <ButtonStarWars>
            <FaRebel />
              Rebel
            <FaRebel />
          </ButtonStarWars>
          <ButtonStarWars>
            <FaEmpire />
              Empire
            <FaEmpire />
          </ButtonStarWars>      
          <ButtonStarWars>
            <FaMandalorian />
              Mandalorian
            <FaMandalorian />
          </ButtonStarWars>
        </div>  
        <div>
          <ButtonStarWars>
            <FaJournalWhills />
              Journal of the Whills
            <FaJournalWhills />
          </ButtonStarWars>
        </div>
        <div>  
          <ButtonStarWars>
            <FaJediOrder />
              Jedi Order
            <FaJediOrder />
          </ButtonStarWars>
          <ButtonStarWars>
            <FaSith />
              Sith
            <FaSith />
          </ButtonStarWars>     
          <ButtonStarWars>
            <GiDeathStar />
              Death Star
            <GiDeathStar />
          </ButtonStarWars>  
        </div>          
      </main>
    </>
  )
}

export default App
Enter fullscreen mode Exit fullscreen mode

The finished project

Here are the links to the finished project:


The finished project


My other related articles


Conclusion

Mastering React children props and component composition empowers you to create reusable, modular components for versatile projects. By harnessing the flexibility of children props, you enhance your application's structure, streamline development, and boost code maintainability. Embrace this powerful feature to elevate your React skills and develop more dynamic, adaptable applications!


Let's connect! I'm active on LinkedIn and Twitter.


Are you now proficient in using React children props and component composition? Have you started creating versatile, reusable components for your projects? Please share the article and comment!

Top comments (0)