A custom Rating item component does not immediately reflect changes of the item.text property when the choice text is updated via Property grid

It's necessary to use the {SurveyElementBase.renderLocString(item.locText)} function to render an item's label.

import {
  ReactElementFactory,
  createElement,
  SurveyElementBase,
} from "survey-js-ui";

window.React = {
  createElement: createElement,
  SurveyElementBase: SurveyElementBase,
};

class CustomChoiceItem extends SurveyElementBase {
  renderElement() {
    const question = this.props.question;
    const item = this.props.item;

    const isDisplayMode = this.isDisplayMode;
    const handleOnClick = this.props.handleOnClick;
    const handleOnMouseDown = this.props.handleOnMouseDown;
    const index = this.props.index;
    const itemStyle = question.getItemStyle(item.itemValue, item.highlight);
    debugger;
    debugger;
    return (
      <label
        onMouseDown={handleOnMouseDown}
        style={{ ...itemStyle, borderRadius: "inherit" }}
        className={question.getItemClass(item.itemValue)}
        onMouseOver={(e) => question.onItemMouseIn(item)}
        onMouseOut={(e) => question.onItemMouseOut(item)}
      >
        <input
          type="radio"
          className="sv-visuallyhidden"
          name={question.name}
          id={question.getInputId(index)}
          value={item.value}
          disabled={isDisplayMode}
          checked={question.value == item.value}
          onClick={handleOnClick}
          onChange={() => {}}
          aria-required={question.ariaRequired}
          aria-label={question.ariaLabel}
          aria-invalid={question.ariaInvalid}
          aria-describedby={question.ariaDescribedBy}
        />
        {SurveyElementBase.renderLocString(item.locText)}
      </label>
    );
  }
}
ReactElementFactory.Instance.registerElement("custom-rate-item", (props) => {
  return React.createElement(CustomChoiceItem, props);
});

View Demo (survey-js-ui)

surveyjs / survey-creator

A custom Rating item component does not immediately reflect changes of the item.text property when the choice text is updated via Property grid #5887