opendevs

Use Context API

Dogendar 🐶 belives in practice so whenever he learns any shinning new concept, he always try to implement it by himself. Today, he wants to implement Context API but he forgot how to use the context. He needs your help!

He created the context, as given by below. It has 2 values - loading and name. Initially, loading is set to true and name is set to empty string. Once name is fetched from backend (you don't need to handle that logic), loading will be set to false and name will be non-empty string.

const AppContext = React.createContext({ loading: true, name: "", })

Help Dogendar finish the component given below and fulfil these requirements:

  • Use the context AppContext given in component props
  • Show <div>Loading</div> when loading value from context is true
  • Show name like <div>{name}</div> when loading value from context is false

Difficulty

easy

Solve the practice problems to earn    DevCoin image 
Coding Area
Output

Copyright © 2022 opendevs

Learn ● Develop ● Ace
All illustrations by Storyset