score:2

Accepted answer
import React from 'react';
import {FormColorProvider} from '../context/FormColorContext';
import DefaultLayout from '../layout/default-layout';
import EmptyDashboardComponent from '../components/Dashboard/EmptyDashboardComponent';
import NewFormComponent from '../components/Dashboard/NewFormComponent';
import ColorSelectorComponent from '../components/Dashboard/ColorSelectorComponent';
import styles from '../styles/dashboard.module.css';


export default function Dashboard() {
  return (
    <div>
      <DefaultLayout>
        <div className={styles.containerMain}>
          <h1 className={styles.headingCenter}>Create a new form</h1>
          <FormColorProvider>
            <ColorSelectorComponent/>
            <NewFormComponent/>
          </FormColorProvider>
        </div>
      </DefaultLayout>
    </div>
  )
}

score:0

import React, { useContext } from 'react';
import styles from '../../styles/NewFormComponent.module.css';
import FormColorContext from '../context/FormColorContext';

export default function NewFormComponent() {
    // remember to destructure the color variable
    const { color } = useContext(FormColorContext);

    console.log(color);
    return (
        <div className={styles.formContainer}>
        </div>
    )
}

Related Query

More Query from same tag