ASP.NET Core 3 and React

Consuming the form context

All of the components beneath the provider can access the context via a Consumer component. Let's use this within the Field component:

1. First, let's import FormContext, useContext, and ChangeEvent from React in the Field component:

import { FC, useContext, ChangeEvent } from 'react';import { FormContext } from './Form';

2. We can then reference the context consumer in the JSX:

export const Field: FC<Props> = ({ name, label, type = 'Text' }) => (  <FormContext.Consumer>    {context => (      <div        css={css`          display: flex;          flex-direction: column;          margin-bottom: 15px;        `}      >        ...      </div>    )}  </FormContext.Consumer>););

3. At the moment, the value of the fields isn't being controlled. We now have access to the value, so let's reference ...