Learn React Hooks

Requests with Effect and State Hooks

First, we are going to request themes from our server, instead of hardcoding the list of themes.

Let's implement requesting themes using an Effect Hook and a State Hook:

1. In the src/ChangeTheme.js file, adjust the React import statement in order to import the useEffect and useState Hooks:

import React, { useEffect, useState } from 'react'

2. Remove the THEMES constant, which is all of the following code:

const THEMES = [    { primaryColor: 'deepskyblue', secondaryColor: 'coral' },    { primaryColor: 'orchid', secondaryColor: 'mediumseagreen' }]

3. In the ChangeTheme component, define a new useState Hook in order to store the themes:

export default function ChangeTheme ({ theme, setTheme }) { const [ themes, setThemes ...