my functions in constructor are not reachable

Question

I am new to reactjs and jsx. I need to use onDragOver and onDragStart functionality of html5 in my react project. So I defined functions as follows in constructor of mycode:

 export class Navbar extends React.Component {

constructor(props) {
    super();
    var allowDrop = function allowDrop(ev) {
        ev.preventDefault();
    }

    function drag(ev) {
        ev.dataTransfer.setData("source", ev.target.id);
    }

    function drop(ev) {
        ev.preventDefault();
        var src = document.getElementById(ev.dataTransfer.getData("source"));
        var srcParent = src.parentNode;
        var tgt = ev.currentTarget.firstElementChild;

        ev.currentTarget.replaceChild(src, tgt);
        srcParent.appendChild(tgt);
    }

}

componentDidMount() {
  }

render() {
    return (
        <ul className="navigation">
            <li id="t1" className="nav-item" onDrop={this.drop(event)} onDragOver={this.allowDrop(event)}><a href="#"
                                                                                                        draggable="true"
                                                                                                        onDragStart={thisdrag(event)}>Greater
                Saint John</a></li>


            <li className="nav-item" id="t2" ondrop={this.drop(event)} onDragOver={this.allowDrop(event)}><a href="#"
                                                                                                        draggable="true"
                                                                                                        onDragStart={this.drag(event)}><span
                className="glyphicon glyphicon-star"></span>&nbsp;&nbsp;    The Victoria Star</a></li>

        </ul>
     );
   }
   }

But when I run it I get the following error:

Uncaught TypeError: this.allowDrop is not a function

can anyone help?

Answer 1

It is because allowDrop is not visible outside constructor as it is a function expression.

function allowDrop(ev) { ev.preventDefault(); }

Declare allowDrop as mentioned above and this should solve the problem. More details on function declaration vs function expression: https://javascriptweblog.wordpress.com/2010/07/06/function-declarations-vs-function-expressions/