Advanced React [Beta], React Context – Provider Wrappers: Can't get past step 1

Link to the lesson:

https://www.codecademy.com/courses/learn-advanced-react/lessons/react-context/exercises/provider-wrappers

Problem:

I cannot get past the first step: It just gives me a faint cross on lightgray background with no error message.
I thought that maybe if I do some of the later steps in advance, it would give me the check mark, but after finishing the exercise, I’m still stuck at that point. Yet the code seems to work, it is still displaying correctly.

Screenshot:

Code:

ThemeContext.js

import React from "react";

export const ThemeContext = React.createContext();

// Put your code here! ✨
export const ThemeArea = ({ children, initialTheme }) => {
  return (
    <ThemeContext.Provider value={initialTheme}>
      {children}
    </ThemeContext.Provider>
  )
}

ContactsApp.js

import React from "react";
import { ContactsSection } from "./ContactsSection";
import { ThemeArea } from "./ThemeContext";

const family = [
  {
    name: "Finn the Human"
  },
  {
    name: "Jake the Dog"
  }
];

const friends = [
  {
    name: "Marceline"
  },
  {
    name: "Princess Bubblegum"
  }
];

export const ContactsApp = () => {
  return (
    <div>
      <h1>Contacts</h1>
      <ThemeArea initialTheme="light">
        <ContactsSection contacts={family} name="Family" />
      </ThemeArea>
      <ThemeArea initialTheme="dark">
        <ContactsSection contacts={friends} name="Friends" />
      </ThemeArea>
    </div>
  );
};

1 Like

3 posts were merged into an existing topic: Advanced React Beta