Intermediate
Headings that find their own level
Every Heading below renders an <h1>. Use the LevelContext so each heading picks its level from how deep it is: a Heading directly inside one Section is an <h1>, inside two Sections an <h2>, inside three an <h3>.
Section should read the current level and provide level + 1 to its children. Heading should read the level and render h1 to h6.
Don't give Heading or Section a level prop: the level must come from context.
What Check tests
- There is exactly one
<h1>: Hectal - React and JavaScript are
<h2> - Context and Reducers are
<h3> - No level props are passed
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.