I inherited a react project and I can't figure out how to use survey-react module. I keep getting this error at http://localhost:3000/
Uncaught TypeError: this.addEvent is not a function
node_modules/survey-react/survey.react.js:2582
2579 | * options.newValue - new value.
2580 | */
2581 |
> 2582 | this.onPropertyChanged = this.addEvent();
| ^ 2583 | /**
2584 | * Event that raised on changing property of the ItemValue object.
2585 | * sender - the object that owns the property
I simplified my project to just 3 files, which are:
This is my src/index.js.
import React from 'react';
import ReactDOM from 'react-dom';
import * as Survey from 'survey-react';
const questions = {
elements:[{"type":"comment","name":"If you could enhance one thing about this product, what would it be?","isRequired":true}]
};
const srv = Survey.Model(questions);
srv.data = {"If you could enhance one thing about this product, what would it be?":"I like it as is, no changes needed."};
ReactDOM.render(<Survey.Survey model={srv} />, document.getElementById('root'));
This is my package.json
{
"name": "testingthis",
"version": "0.1.0",
"private": true,
"dependencies": {
"babel-jest": "^23.6.0",
"react": "^16.6.1",
"react-dom": "^16.4.2",
"react-scripts": "^2.1.8",
"survey-react": "1.9.33"
},
"scripts": {
"start": "react-scripts start"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
This is my public/index.html
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
</html
What am I doing wrong?
I can't find any documentation on the survey-react package, but the official docs on the SurveyJS site say you should use the survey-core and survey-react-ui packages (https://surveyjs.io/Documentation/Library?id=get-started-react):
import { StylesManager, Model } from "survey-core";
import { Survey } from "survey-react-ui";
So either switch to those, or if you insist on using survey-react, you can get it working by changing your code like this:
import React from "react";
import ReactDOM from "react-dom";
import * as Survey from "survey-react";
const questions = {
elements: [
{
type: "comment",
name:
"If you could enhance one thing about this product, what would it be?",
isRequired: true
}
]
};
const data = {
"If you could enhance one thing about this product, what would it be?":
"I like it as is, no changes needed."
}
ReactDOM.render(<Survey.Survey json={questions}
data={data} />, document.getElementById("root"));