10 React Challenges (Beginner): Render Props

Celý článek

Render Props allows React components to share reusable or customizable interfaces as functions through props.

In this react challenge, we will render 3 different cards with a single card component using render props.

The Challenge: Display Cards Using Render Props

• CodePen Final: https://codesandbox.io/s/challenge-10-render-props-final-9kn73
• CodePen Starter: https://codesandbox.io/s/challenge-10-render-props-starter-q7k0n

In this challenge, a card component is created to be used in the parent App component, two separate cards were rendered using this Card component with one having a header and the other a footer using render props.

Render a third card having both a header and a footer using render props. The main tasks in this challenge are:

• Create a third card component.
• Using render props, render Image in the header and Button in the footer of the card.

Starter Code

Fork this CodeSandbox to get started: https://codesandbox.io/s/challenge-10-render-props-starter-q7k0n

Two card components are created in the starter code as well as styles included in styles.css, feel free to use them.

Here's what the final page looks like.

Hint

Lookup Render Props in the official React.js documentation here.

Solution: Render a Third Card using Render Props

By the way of render props, we are able to selectively render other elements in a component without using the components own render function.

In this challenge, the Card component accepts three props of renderHeader, renderFooter and children. The renderHeader and renderFooter props are functions returned in the JSX of Card.

Create the third <Card/> component in App and pass in the Button and Image functions to the renderFooter and renderHeader props respectively. Do this with:

import // ... import dependencies

/**
  * A card component that has 3 different parts
  */
function Card({ renderHeader, children, renderFooter }) {
  return (
    <div className="card">
      // component definition
    </div>
  );
}

const Button = () => <button>Click me!</button>;

const Image = () => <img src="http://placekitten.com/g/400/200" alt="cat" />;

/**
  * The main app. Use the Card component twice
  */
function App() {
  return (
    <div className="App">

      // . . . 

        {/* Third card: Has image and button */}
        <Card renderHeader={Image} renderFooter={Button}>
          I am the third card
        </Card>
      </div>

      <ScotchInfoBar />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

With this, the JSX of Image and Button are rendered in the cards specified header and footer respectively.

Here's what the final page looks like:

You can find the completed CodeSandbox here: https://codesandbox.io/s/challenge-10-render-props-final-9kn73

Conclusion

In this challenge, we created a card component and selectively rendered a button and an image in it using render props.

Have you got questions, suggestions, and comments? We'd love to see them in the comment section. You can find other challenges here and join the live streams here. Happy keyboard slapping!