2

I have created a simple LWC that displays a form and sends user data to Salesforce:

userForm.js

import { LightningElement } from 'lwc';

export default class UserForm extends LightningElement {
    objectApiName = 'Contact';
    fieldList = ['First Name', 'Last Name', 'Email'];
}

userForm.html

<template>
    <lightning-card title='Contact Creation'>
        <p class='slds-p-horizontal_small'>
            <lightning-record-form 
                object-api-name={objectApiName} 
                fields={fieldList}>
            </lightning-record-form>
        </p>
    </lightning-card>
</template>

I am trying to work out how I can implement this so that I can render this form in my react project.

I have created a rollup.config.js file at root level:

import lwc from "@lwc/rollup-plugin";
import replace from "@rollup/plugin-replace";

export default {
    input: "src/index.js",
    output: {
        file: "dist/index.js",
        format: "esm",
    },
    plugins: [
        replace({
            "process.env.NODE_ENV": JSON.stringify("development"),
        }),
        lwc(),
    ],
};

as well as an lwc.config.json file:

{
    "modules": [
        {
            "dir": "src/modules"
        }
    ]
}

and have the following dependencies installed in my node_modules:

"devDependencies": {
    "@lwc/rollup-plugin": "^2.1.0",
    "@rollup/plugin-replace": "^2.4.2",
    "lwc": "^2.1.0",
    "rollup": "^2.50.5"
},

Both my userForm.js and userForm.html files are contained within the src folder of my react project. My plan was to import userForm.js directly into the component I want it to be displayed in, ValidateUser.js, and simply reference it in the return statement:

ValidateUser.js

import React, { Component, Fragment } from 'react';
import UserForm from '../path to userForm.js'

class ValidateUser extends Component {
    render() {
        return (
            <Fragment>
                <UserForm  />
            </Fragment>
        );
    }
}

However this does not work and in the console I receive the error:

Warning: The <UserForm /> component appears to have a render method, but doesn't extend React.Component. This is likely to cause errors. Change UserForm to extend React.Component instead.

Does anybody know of a way that this can be achieved?

2
  • why don't you just create a react form component? what is the benefit of this approach?
    – glls
    Jun 2 at 17:18
  • Hi, thanks for your response. My end goal here is just to find a way to include a form in my project that submits data to Salesforce. I'm using lwcs but open to using any other approach that will help me achieve that Jun 3 at 5:03
1

I don't see any advantage on trying to use a LWC in a react app, you just need an HTML form (can be built using react), you can leverage the UI API to send your form data to Salesforce without the need of trying what you seem to be asking.

2
  • Yes, on researching the UI API this definitely seems like the right way to go. Thanks a lot for your help Jun 4 at 15:29
  • no prob =) - glad I was able to help
    – glls
    Jun 4 at 15:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.