---
title: "Implement a Sitecore form in a JSS React app"
slug: "implement-a-sitecore-form-in-a-jss-react-app"
abstract: "Implement a Sitecore form in a React JSS application"
---
# Implement a Sitecore form in a JSS React app

After [creating a Sitecore form and added the form to a JSS app route in Sitecore](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/walkthrough--using-a-sitecore-form-in-jss-applications.html "Walkthrough: Using a Sitecore form in JSS applications"), 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:

- [You must have SSL enabled for your environment or disabled secure cookies in your Sitecore instance](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/secure-cookies-and-local-jss-app-development.html "Secure cookies and local JSS app development").
- Your React JSS app must use the [REST Layout Service](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/jss-layout-api.html "JSS Layout API").
- You are [server-side rendering the JSS React application](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/walkthrough--rendering-a-jss-app-server-side-using-the-headless-jss-proxy.html "Walkthrough: Rendering a JSS app server-side using the headless JSS proxy").

To render a Sitecore form in a React JSS application:

1. In the root directory of your JSS application, install the necessary packages by running the following command:

    ```text
    npm install @sitecore-jss/sitecore-jss-forms @sitecore-jss/sitecore-jss-react-forms
    ```

2. 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:

    ```csharp
    import { Form } from '@sitecore-jss/sitecore-jss-react-forms';
    import React from 'react';
    import { useNavigate } from 'react-router-dom';
    import { sitecoreApiHost, sitecoreApiKey } from '../../temp/config';

    const JssReactForm = ({ fields }) => {

      const navigate = useNavigate();

      return (
        <Form
          form={fields}
          sitecoreApiHost={sitecoreApiHost}
          sitecoreApiKey={sitecoreApiKey}
          onRedirect={(url) => navigate(url)}
        />
      );

    };

    export default 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 requests are sent directly to your Node.js server.

3. Start the JSS app in connected mode:

    ```text
    jss start:connected
    ```

You can see the form data dumped to the page as JSON.