CODEWITHSUNDEEP
javascriptreactjsforms
Farhana
Farhana

Reputation: 169

The "react-standalone-form" is not working

I have created a react application using createReactApp.. then added react-standalone-form using yarn add react-standalone-form. It added the dependency in the package.json file as

"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1",
"react-standalone-form": "^1.1.0"
"react-toastify": "^6.0.8",

},

Then i just copy pasted the code from the following URL in the index.js https://codesandbox.io/s/jpz56ymo63?file=/src/index.js:0-729

While loading localhost:3000 it throws the following error

Uncaught TypeError: Cannot read property 'errorNotificationFunc' of undefined

Pls refer the screenshot. enter image description here enter image description here

Before i done the same with my existing website it was not working, got the same error, so i tried with sample using createReactApp. I have installed "React-Toastify" too.

Upvotes: 0

Views: 135

Answers (2)

Frontcraft
Frontcraft

Reputation: 1

Actual answer: Update package to the latest version. It has been fixed some time ago.

Upvotes: 0

Frank
Frank

Reputation: 2198

Short Answer

Looking at the latest version the theme prop on the FormThemeProvider is now required so to solve your problem you must pass something for the theme prop

 <FormThemeProvider theme={{}}>
    <div className="my-app">
      <BasicFormExample />
    </div>
  </FormThemeProvider>

Long Answer

Looks like the code has changed from the version you last used. You have done the work to pinpoint which version bump is the issue (0.9.4 - 0.10.0). Looking at the commit history on the repo there is something about a theme object in the commit for 0.10.0.

enter image description here

Looking at that specific change it appears that the FormThemeProvider no longer uses a default theme, instead it expects a theme to be passed in.

Old Code In commit

const FormThemeProvider = ({ theme, children }) =>
  <ThemeProvider theme={theme
    ? {
      sizes: { ...defautTheme.sizes, ...theme.sizes },
      colors: { ...defautTheme.colors, ...theme.colors },
      typography: { ...defautTheme.typography, ...theme.typography },
      breakpoints: { ...defautTheme.breakpoints, ...theme.breakpoints },
      textLabels: { ...defautTheme.textLabels, ...theme.textLabels },
      customValidationFunction: theme.customValidationFunction,
    }
    : defautTheme
  }>
    <React.Fragment>
      {children}
      <ToastContainer hideProgressBar autoClose={5000} />
    </React.Fragment>
  </ThemeProvider>

New Code in commit

const FormThemeProvider = ({ theme, children }) => {
  return (
    <ThemeProvider theme={outerTheme => {
      if (outerTheme) {
        setIsRoot(true)
      }
      const parentTheme = outerTheme || defautTheme
      const currentTheme = {
        sizes: { ...parentTheme.sizes, ...theme.sizes },
        colors: { ...parentTheme.colors, ...theme.colors },
        typography: { ...parentTheme.typography, ...theme.typography },
        breakpoints: { ...parentTheme.breakpoints, ...theme.breakpoints },
        textLabels: { ...parentTheme.textLabels, ...theme.textLabels },
        ...parentTheme.customValidationFunction,
        ...theme.customValidationFunction,
      }
      return currentTheme
    }}>
      <React.Fragment>
        {children}
        <ToastContainer hideProgressBar autoClose={5000} />
      </React.Fragment>
    </ThemeProvider>
  )
}

The old code tested the incoming theme prop and if it was null would just return the default theme. The new code requires the theme to be something other than undefined.

Looking at the latest version this is still the case so to solve your problem you must pass something for the theme prop on the FormThemeProvider.

Upvotes: 1

Related Questions