title: How to pass props to strategy function for decorator in draft.js
body: <p>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</p>
  
  <pre><code>const  highlightWorngWords = (contentBlock, callback , props  )  =&gt; {
  let text = contentBlock.getText();
  let worngWords =  props.errorWordslist ? props.wongwords : []  ;
  console.log('wong words', worngWords);  
  let start ; 
  worngWords.forEach(word =&gt; {
    start = text.indexOf(word);
    if (start !== -1) {
      callback(start, start + word.length);
     }
   })
  }
  </code></pre>
  
  <p>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  </p>
  
  <pre><code>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) =&gt;  {
        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(
      &lt;Fragment&gt;
          &lt;main id="main-container" className="main_container"&gt;
          &lt;section data-simplebar="init" id="editor-wrap" className="editor_wrap" ss-container='true'&gt;
  
            &lt;div 
             id="dhad-editor" 
             className="dhad_editor"  
            &gt;
            &lt;Editor
                    editorState={this.state.editorState}
                    onChange={this.handleChange} 
            /&gt;
            &lt;/div&gt;
          &lt;/section&gt;      
        &lt;/main&gt;
  
      &lt;/Fragment&gt;
      );
   }
  }   
  const  highlightWorngWords = (contentBlock, callback)  =&gt; {
    let text = contentBlock.getText();
   let worngWords =  this.props.errorWordslist ? this.props.errorWordslist:[];
    console.log('wong words', worngWords);  
    let start ; 
    worngWords.forEach(word =&gt; {
      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 =&gt; {
    return {
        text: state.edi.text ,
        errorWordslist: state.edi.errorWordslist,
        correctionsList: state.edi.correctionsList 
    };
  };
  
  const mapDispatchToProps = dispatch =&gt; {
  return {
      onStart: () =&gt; dispatch(actionCreators.start()),
      onChangeText: (value)   =&gt; dispatch(actionCreators.TextChange(value)),
      onSpellCheck: (word)    =&gt; dispatch(actionCreators.ErorrWordsList(word)),
  
  }
  };
  
  
  
  export default connect( mapStateToProps , mapDispatchToProps ) (Main);
  </code></pre>