Rendering Dynamic HTML using "react-native-pell-rich-editor" module-CodePudding

Good day!

I would like to ask if someone know how to render the HTML dynamically after passing a props from my customized component. since I only noticed that initialContentHTML props can render HTML when the component is on mount stage.

Thank you!

// My Component
const CheckboxDetails = (props) => {
const {
    currentIndex = 0,
    onChangeRichText,
    richTextRef,
    initialContentHTML,
    disabled,
  } = props;


  // Rich Text Component from "react-native-pell-rich-editor"  
    <RichEditor
      ref={(el) => { return richTextRef.current[currentIndex] = el; }}
      useContainer={false}
      containerStyle={{ minHeight: height }}
      onChange={onChangeRichText}
      editorInitializedCallback={editorInitializedCallback}
      initialContentHTML={initialContentHTML}                    
      disabled={disabled}
    />
}

export default CheckboxDetails

I was planning to change another module, however it will take longer to modify our system and might as well affect some part of our system.

CodePudding user response：

Using ref you can call html modification method setContentHTML or insertHTML

const editor = useRef(null);

const changeHTML = () => editor.setContentHTML('some HTML here')

<RichEditor
  ref={editor}
  initialContentHTML={'Hello <b>World</b> <p>this is a new paragraph</p> <p>this is another new paragraph</p>'}
/>