Skip to content

Exercises

Building a FAQ

Let's suppose we're building a “Frequently Asked Questions” component:

On the surface, this sort of UI component might seem straightforward, but there are a bunch of usability/accessibility concerns here. Rather than try to tackle them all ourselves, we'll use the Radix Primitive “Accordion” component.

Your mission is to use this component to implement the Frequently Asked Questions.

Acceptance Criteria:

  • Using the Accordion component from Radix Primitives, wire it up so that we see the 4 Kendama-related questions. Clicking the question should reveal the answer.
  • The component should be styled so that it matches the example above. The classes are provided in FrequentlyAskedQuestions.module.css, but you'll need to apply them to the correct elements.
  • No key warnings should be present in the console.

Code Playground

import React from 'react';
import * as Accordion from '@radix-ui/react-accordion';

import styles from './FrequentlyAskedQuestions.module.css';

function FrequentlyAskedQuestions({ data }) {
return (
"TODO!"
);
}

export default FrequentlyAskedQuestions;

Solution:

Stretch goal: Add an icon

Most accordions like this have a caret or chevron that swivels when the item is expanded. It's a nice little detail that makes clear what the expected interaction is.

Update your solution to include a chevron:

For the icon, you can use the ChevronDown icon from React Feather:

import { ChevronDown } from 'react-feather';

To flip it to an upwards-pointing chevron, you can apply the following CSS:

svg {
  transform: rotate(180deg);
}

This is a tricky problem, But the docs should help. Be sure to check out the “Styling” page from the Radix Primitives docs!

Solution:

Building a Tooltip

On this course platform, I have an Asterisk component that I use to tuck additional contextual information out of the way. For example, this one:

Try to focus or hover over that asterisk, and you'll see a tooltip pop up with an interesting bird fact.

In this exercise, we're going to implement this component using the “Tooltip” component from Radix Primitives.

Acceptance Criteria:

  • Focusing or hovering over the asterisk should show the tooltip, containing the provided children.
  • When hovering, the tooltip should show after 200ms.

Code Playground

import Asterisk from './Asterisk';

function App() {
return (
<p>
This paragraph has some additional context
<Asterisk>
I’m the additional context!
</Asterisk>{' '}
held in an asterisk
</p>
);
}

export default App;

Solution: