implementing tagbox widget in functional components

Question

i have been working on creating surveyjs form in reactjs using functional components.Everything else fits perfectly but the issue is regarding restfull tagBox widgets.

there is a good example to use it in class component https://codesandbox.io/s/ljnh1, but i'm having difficulties to convert it into functional component.

any help from your end will be great Thanks

TSV · Accepted Answer · 2021-05-15T11:09:53.793

You can move all the static initializations outside the component:

import React, { Component } from "react";
import $ from "jquery";
import select2Init from "select2";
import "select2/dist/css/select2.min.css";

import * as Survey from "survey-react";
import * as widgets from "surveyjs-widgets";

import "survey-react/modern.css";
import "./index.css";

Survey.StylesManager.applyTheme("modern");

window["$"] = window["jQuery"] = $;
select2Init();
widgets.select2(Survey);
widgets.select2tagbox(Survey);

class SurveyComponent extends Component {
  render() {
    const json = {
      elements: [
        {
          type: "tagbox",
          isRequired: true,
          choicesByUrl: {
            url: "https://restcountries.eu/rest/v2/all"
          },
          name: "countries",
          title:
            "Please select all countries you have been for the last 3 years."
        }
      ]
    };
    const survey = new Survey.Model(json);

    return <Survey.Survey model={survey} />;
  }
}

export default SurveyComponent;

And thus you'll get the only render function left in your class.

Here is your forked plunker - https://codesandbox.io/s/new-brook-wsmot?file=/src/SurveyComponent.jsx

Update 1

Functional component

import React, { Component } from "react";
import $ from "jquery";
import select2Init from "select2";
import "select2/dist/css/select2.min.css";

import * as Survey from "survey-react";
import * as widgets from "surveyjs-widgets";

import "survey-react/modern.css";
import "./index.css";

Survey.StylesManager.applyTheme("modern");

window["$"] = window["jQuery"] = $;
select2Init();
widgets.select2(Survey);
widgets.select2tagbox(Survey);

function render() {
  const json = {
    elements: [
      {
        type: "tagbox",
        isRequired: true,
        choicesByUrl: {
          url: "https://restcountries.eu/rest/v2/all"
        },
        name: "countries",
        title: "Please select all countries you have been for the last 3 years."
      }
    ]
  };
  const survey = new Survey.Model(json);

  return <Survey.Survey model={survey} />;
}

export default render;

Here is the updated code sandbox - https://codesandbox.io/s/crazy-elgamal-01nku?file=/src/SurveyComponent.jsx

And of course - survey model should be passed as a prop value

Hi, this is works great using classes, but is there any way to make it work using functions by using hooks? — Danish Khan, May 15 '21 at 05:31
@DanishKhan functional component is just a render function. Check the updated code sandbox — TSV, May 15 '21 at 11:10
@DanishKhan If this answer works for you than in this community topic starter usually marks it the accepted answer — TSV, May 23 '21 at 16:59

implementing tagbox widget in functional components

1 Answers1

Update 1