Search⌘ K
AI Features
Home
Courses
React Deep Dive: From Beginner to Advanced

Exercise

Explore how to write a higher-order component named withSecretToLife that injects a shared prop into wrapped components. Understand how this pattern enables reusable and encapsulated logic for passing data such as the secret to life value across your React app.

We'll cover the following...

Problem

You belong to a team of astronauts that are currently on a mission to discover the secret to life denoted by secretToLife. After many days of research and hard work, your team is finally successful and discovers the secret which turns out to be the number 42. Your team lead has asked you to edit the programming files so that this number can be passed as a prop to other components and be accessible by everyone. Write a higher-order component withSecretToLife in order to achieve this goal.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app.js';
require('./style.css');

ReactDOM.render(
  <App />, 
  document.getElementById('root')
);

Solution

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app.js';
require('./style.css');

ReactDOM.render(
  <App />, 
  document.getElementById('root')
);