Skip to content

Latest commit

 

History

History
58 lines (42 loc) · 2.45 KB

README.md

File metadata and controls

58 lines (42 loc) · 2.45 KB

Objective

Learn to create and dynamically update a Context in React. Understand how changes in the context values are reflected across components that consume the context.

Setup

  1. Create an 'Exercises' Directory (If not already done):

    • Create a directory on your local machine to house all your exercises, using mkdir Exercises.

  2. Fork the Repository:

    • Navigate to the GitHub repository for this exercise at 03-26-creating-updating-context.
    • Click on the 'Fork' button to create a fork of the repository.

  3. Clone Your Forked Repository:

    • Open the terminal.
    • Navigate to your Exercises directory with cd path/to/Exercises.
    • Run git clone <your-forked-repo-url> to clone the repository to your machine, creating a new directory named 03-26-creating-updating-context.

  4. Initial Setup:

    • Change to the exercise directory: cd 03-26-creating-updating-context.
    • Run npm install to install dependencies.

Exercise Instructions

  1. Create and Export UserContext:

    • In src, create UserContext.js.
    • Define UserContext using React.createContext() with default user values (e.g., { name: 'John Doe', age: 30 }).
    • Export UserContext.

  2. Create UserProfile Component:

    • Create UserProfile.js.
    • Use useContext(UserContext) to access and display the user's name and age.

  3. Implement Context Value Updates in App:

    • In App.js, import UserContext and UserProfile.
    • Use useState to create a state that holds user information.
    • Wrap UserProfile with UserContext.Provider, passing the state as the context value.
    • Add functionality to change the user information (e.g., a button to change the user's name).

  4. Observing Context Changes:

    • Observe how changing the state in App.js updates the context values and how these changes are reflected in UserProfile.

Expected Outcome

  • UserProfile displays the initial user information from UserContext.
  • Modifications to the user information in App.js are reflected in UserProfile.

Submission

  1. Commit Your Changes:

    • Save all changes.
    • Use git add ., then git commit -m "Completed Creating and Updating Context exercise".
    • Push the commit to your forked repository with git push.

  2. Create a Pull Request:

    • Go to your repository on GitHub.
    • Initiate a 'Pull Request' to the original repository.
    • Describe your implementation in the pull request details.