How to pass props to strategy function for decorator in draft.js

Question

I have a strategy function for a decorator and I would like to pass props to the strategy function I have tried the code below but It gives me cannot read property props of undefine

const  highlightWorngWords = (contentBlock, callback , props  )  => {
let text = contentBlock.getText();
let worngWords =  props.errorWordslist ? props.wongwords : []  ;
console.log('wong words', worngWords);  
let start ; 
worngWords.forEach(word => {
  start = text.indexOf(word);
  if (start !== -1) {
    callback(start, start + word.length);
   }
 })
}

the props is just an array of words I am getting it from mapStateToProps and I did try to assign with the value inside the function and It works but when I would like to pass the props to the function it won't work Any idea how to pass the props to it

import React, { Component  , Fragment} from 'react';
import { connect } from 'react-redux';
import * as actionCreators from '../../store/actions/index';
import Footer from '../Footer/Footer';
import { Editor, EditorState , CompositeDecorator   } from 'draft-js';
import HighlightedWords   from './MyComponent'
var  h2p  = require('html2plaintext');




class Main extends Component {
    constructor(props) {
        super(props);
        this.state = { 
          editorState: EditorState.createEmpty(compositeDecorator),
          subjectTitle: "",
      } 
      this.handleChange = this.handleChange.bind(this);
      this.animEditor = this.animEditor.bind(this);

    }

    handleChange =  (editorState) =>  {
      let TextValue = editorState.getCurrentContent().getPlainText();
      this.setState({
        editorState,
      });
      var text =  h2p(editorState.getCurrentContent().getPlainText());
      console.log("satet" , text);
      this.props.onChangeText(text);
      this.props.onSpellCheck(text); 
    }


    return(
    <Fragment>
        <main id="main-container" className="main_container">
        <section data-simplebar="init" id="editor-wrap" className="editor_wrap" ss-container='true'>

          <div 
           id="dhad-editor" 
           className="dhad_editor"  
          >
          <Editor
                  editorState={this.state.editorState}
                  onChange={this.handleChange} 
          />
          </div>
        </section>      
      </main>

    </Fragment>
    );
 }
}   
const  highlightWorngWords = (contentBlock, callback)  => {
  let text = contentBlock.getText();
 let worngWords =  this.props.errorWordslist ? this.props.errorWordslist:[];
  console.log('wong words', worngWords);  
  let start ; 
  worngWords.forEach(word => {
    start = text.indexOf(word);
    if (start !== -1) {
      callback(start, start + word.length);
     }
   })
}
const compositeDecorator = new CompositeDecorator([
  {
    strategy: highlightWorngWords.bind(this), //here
    component: HighlightedWords ,
   }
 ]);
const mapStateToProps = state => {
  return {
      text: state.edi.text ,
      errorWordslist: state.edi.errorWordslist,
      correctionsList: state.edi.correctionsList 
  };
};

const mapDispatchToProps = dispatch => {
return {
    onStart: () => dispatch(actionCreators.start()),
    onChangeText: (value)   => dispatch(actionCreators.TextChange(value)),
    onSpellCheck: (word)    => dispatch(actionCreators.ErorrWordsList(word)),

}
};



export default connect( mapStateToProps , mapDispatchToProps ) (Main);

Karim · Accepted Answer · 2018-10-22T16:52:26.187

1

the props is just an array of words I am getting it from mapStateToProps

add the function within the the component class and keep the arrow function declaration to autobind the component context.

highlightWorngWords = (contentBlock, callback)  => {
let text = contentBlock.getText();
let worngWords =  this.props.errorWordslist ? this.props.wongwords : []; //HERE
console.log('wong words', worngWords);  
let start ; 
worngWords.forEach(word => {
  start = text.indexOf(word);
  if (start !== -1) {
    callback(start, start + word.length);
   }
 })
}

and then fix the decorator declaration in the constructor to point to this.highlightWorngWords

const compositeDecorator = new CompositeDecorator([
  {
    strategy: this.highlightWorngWords, //here
    component: HighlightedWords
  }
]);

edited Oct 22 '18 at 16:52

answered Oct 12 '18 at 15:32

Karim

8,454
3
25
33

thanks for your response but It shows the same result – Rami Salim Oct 12 '18 at 17:20
here how I am trying to access the props , let worngWords = this.props.errorWordslist ? this.props.errorWordslist : [] ; Is it allright ? – Rami Salim Oct 12 '18 at 17:20
you changed the code of the highlightWorngWords function, that is why is not working :) restore it back as it was, refer to this.props inside it. – Karim Oct 12 '18 at 17:24
I restore it back I am still getting the same error – Rami Salim Oct 12 '18 at 17:34
I have updated the code for whole component you can check it – Rami Salim Oct 12 '18 at 17:38
you keep changing the code, put the instantiation of the compositeDecorator within the component class (not outside) otherwise you will bind an undefined "this" to the function. check the updated answer :) – Karim Oct 13 '18 at 15:33
I added CompositeDecorator in the constructor and I bounded the function to it . but I am still getting this as undefine when I refer to it. kindly check it https://codesandbox.io/s/627qz39x83 – Rami Salim Oct 14 '18 at 02:43
Thanks , I really appreciated your help – Rami Salim Oct 14 '18 at 17:32
what If I would like to create an entity to show a metadata for each child in the decorator component? – Rami Salim Oct 20 '18 at 19:42
@RamiSalim i don't know that library, i can't help you on this, if you need more specific help on draft.js try to open a new topic – Karim Oct 21 '18 at 21:23

How to pass props to strategy function for decorator in draft.js

1 Answers1