opendevs logo

Use Context API

Solidify your knowledge of Context API by solving this problem.

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

Solve this easy problem to earn  1  DevCoin image
Coding Area
opendevs logo
CoursesFAQsContact UsPrivacy PolicyTerms Of Service
Copyright © 2023 opendevs
Learn ● Develop ● Ace
All illustrations by Storyset