10 React Challenges for Beginners - Lesson #9

React Challenge: Recreate Layout with Components

Components are the building blocks of React Applications, and each is a JavaScript function. These components comprise of Parent and Child components.

Data is passed from parent to child through what is called Props. Props are simply arguments to these functions.

Data in React is can be sent from parent to child components via props

For this challenge, you will recreate a simple layout having multiple cards created off a single defined React component.

In this challenge you are provided with an empty function which will serve as a child component. This component will receive props of an icon, label and number.

The main tasks of this challenge are:

  • Define the child component in JSX.
  • Define props of icon, label and number in the child component.
  • Use the child component numerous times in the provided parent component and pass in varying data as props.

Fork this Codesandbox to get started.

A StatCard function is provided, use this as a child component in the App component.

The starter CodeSandbox contains styling, feel free to use that.

Here's what the final page looks like:

As a bonus in this challenge, pass a function from the parent to the child component using props.

Components are an essential part of React applications.

For this challenge, we are required to define a child component, define data to be received via props in the child component, and utilize this child component multiple times in a parent component.

Components allow for the reuse of data and structure in React.

This challenge will be solved in three steps:

  • Define the child component and provide props as parameters.
  • Use the child component in the parent component and provide data through props.

In the starter CodeSandbox, we were provided with an empty StatCard component which returned nothing. Define the component with:

jsx
// import  ... import dependencies

function StatCard(props) {
  return (
    <div className="stat-card">
      <div className="stat-line">
        <span>{props.icon}</span>
        <strong>{props.label}</strong>
      </div>
      <p>{props.number.toLocaleString()}</p>
    </div>
  );
}

function App() {
  return (
    <div className="App">
      {/* define parent component */}
    </div>
  );
}

Here we defined the child component which is simply a card having an icon, a label and a number. The value of these data will be gotten from the provided props.

A better and cleaner way to define the StatCard component will be to destructure the props object in the parameter before using it. Redefine the StatCard component to:

jsx
function StatCard({ icon, label, number }) {
  return (
    <div className="stat-card">
      <div className="stat-line">
        <span>{icon}</span>
        <strong>{label}</strong>
      </div>
      <p>{number.toLocaleString()}</p>
    </div>
  );
}

While we have defined the child component, specified the data to be received, and used this data in the component, we will proceed to use this component multiple times in the parent.

Different data will also be used for each child component to better illustrate the use of components.

jsx
// import  ... import statement

function StatCard({ icon, label, number }) {
  return (
    <div className="stat-card">
      <div className="stat-line">
        <span>{icon}</span>
        <strong>{label}</strong>
      </div>
      <p>{number.toLocaleString()}</p>
    </div>
  );
}

function App() {
  return (
    <div className="App">
      <StatCard icon="šŸ‘‰" label="Points" number={3000} />
      <StatCard icon="āš”" label="Lightnings" number={6540} />
      <StatCard icon="šŸ¤™" label="Shakas" number={337010} />
      <StatCard icon="šŸ’Ž" label="Diamonds" number={98661} />
    </div>
  );
}

The child component is here used in the parent four times with varying data for each component. Each of the data provided is passed to the child component previously defined.

What do we have with this?

Final CodeSandbox here.

In this challenge, we saw the importance of components to React and built a layout multiple times using child components.

Want to improve your coding and design skills?

I'm continually researching the best practices and tools for coding.
Join 50,000+ developers looking to make cool stuff.

We value your privacy. 1-click unsubscribe.

Chris Sev

Chris Sev

Chris Sev is the co-founder of Better Dev. Coding better every day. Previously he created Scotch.io which was acquired.

Comments

What did you think of the article? Let us know!
(these comments are powered by GitHub issues and use 0 trackers)