> ## Documentation Index
> Fetch the complete documentation index at: https://learn.mintlify.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Conditional content
> Use the view component to show or hide content based on a user selection.
export const Quiz = ({question, answers, correctFeedback, incorrectFeedback}) => {
const [selected, setSelected] = React.useState(null);
const [checked, setChecked] = React.useState(false);
const quizId = React.useId();
const isCorrect = checked && answers[selected]?.correct;
const reset = () => {
setSelected(null);
setChecked(false);
};
return
;
};
The `` component lets you conditionally show content based on a user's selection.
## What does `` do?
`` components create a multi-view dropdown that lets users switch between different versions of a page. Each `` block has a `title` that identifies it in the dropdown. When a user selects a title, only that block's content displays.
````mdx Example of views theme={null}
This content is only visible when JavaScript is selected.
```javascript
console.log("Hello from JavaScript!");
```
This content is only visible when Python is selected.
```python
print("Hello from Python!")
```
````
To see views in action, select JavaScript or Python from the dropdown above the table of contents and see how the following content changes.
This content is only visible when JavaScript is selected.
```javascript theme={null}
console.log("Hello from JavaScript!");
```
This content is only visible when Python is selected.
```python theme={null}
print("Hello from Python!")
```
The table of contents also updates when a user switches views, showing only the headings within the selected view.
## How to choose between views, tabs, and code groups
These three components often seem interchangeable, but each fits a different situation:
* Use `` when only the code varies and the explanation is the same for all languages.
* Use `` for content that varies by framework, authentication method, or other user context.
* Use `` when large amounts of content or multiple code samples vary by language or framework across an entire page.
The difference is scope. Tabs are localized, only one section of the page changes. Views affect the entire page and update the table of contents to match.
## When is `` the best choice?
View components work best when:
* Your page covers a concept that plays out differently across multiple languages or frameworks.
* The structure and headings of the page differ meaningfully between languages (not just the code).
* You want users to set their language once and have it apply to everything on the page.
A typical use case is an SDK reference page where the JavaScript version uses promises and the Python version uses a different pattern entirely with different examples, explanations, and headings.
## When not to use ``
Don't use views when only the code differs between options. That's what `` components are for, shared explanation, language-specific code.
Don't use views when procedures differ in a single section of a longer page. Tabs handle localized variation better, since they leave the rest of the page unchanged.
Don't use views when users are choosing between options to compare them. Views are for users who have already chosen their language or framework and want to see only what's relevant to them.
Next up: [Tables for structured comparisons](/courses/components/tables) — When grid layouts communicate relationships better than prose or cards.