[Suggestion]: Make the Conditional Rendering example a pure function component #8100
Description
Summary
In the Conditional Rendering Challenges, the second solution uses an external object:
const drinks = {
tea: { part: 'leaf', caffeine: '15–70 mg/cup', age: '4,000+ years' },
coffee: { part: 'bean', caffeine: '80–185 mg/cup', age: '1,000+ years' }
};
function Drink({ name }) {
const info = drinks[name];
// ...
}This makes the component not entirely pure because it depends on external data.
Page
https://react.dev/learn/conditional-rendering#refactor-a-series-of---to-if-and-variables
Details
The second solution uses an external object.
This makes the component not entirely pure because it depends on external data.
const drinks = {
tea: { part: 'leaf', caffeine: '15–70 mg/cup', age: '4,000+ years' },
coffee: { part: 'bean', caffeine: '80–185 mg/cup', age: '1,000+ years' }
};
function Drink({ name }) {
const info = drinks[name];
// ...
}
export default function DrinkList() {
return (
<div>
<Drink name="tea" />
<Drink name="coffee" />
</div>
);
}Suggestion
It would be helpful to either:
Mention the “Keeping Components Pure”
section for readers to understand the implications, or
Modify the example to define drinks inside the function so that it becomes a pure function component.
If you agree, I would be happy to submit a PR for this improvement.