Implement a Sitecore form in a JSS React app

Abstract

Implement a Sitecore form in a React JSS application

After you have created a Sitecore form and added the form to a JSS app route in Sitecore, you can implement a JSS Form component that renders the Sitecore Form in your JSS application.

Using Sitecore Forms in JSS apps requires functioning session cookies. For this purpose:

To render a Sitecore form in a React JSS application:

In the root directory of your JSS application, install the necessary packages by running the following command:
```
npm install @sitecore-jss/sitecore-jss-forms @sitecore-jss/sitecore-jss-react-forms
```
To make the form render, you must tell the application how to render the Sitecore Forms schema. In the src directory of the rendering app, in a component file, for example, src/components/JssReactForm.tsx, implement your form component:
```
import { Form } from '@sitecore-jss/sitecore-jss-react-forms';
import React from 'react';
import { withRouter } from 'react-router-dom';
import { sitecoreApiHost, sitecoreApiKey } from '../../temp/config';

const JssReactForm = ({ fields, history }) => (
  <Form
    form={fields}
    sitecoreApiHost={sitecoreApiHost}
    sitecoreApiKey={sitecoreApiKey}
    onRedirect={(url) => history.push(url)}
  />
);

export default withRouter(JssReactForm);
```
Note
In headless mode, you get an error if you send requests directly to the Sitecore instance. You must set sitecoreApiHost to an empty string, for example, sitecoreApiHost={''}, so that requests are sent directly to your Node.js server.
Start the JSS app in connected mode:
```
jss start:connected
```
You can see the form data dumped to the page as JSON.