call function in React functional component

Question

I am trying to call a function from a div like the following

<div id='div_abstract'>
 {content.abstract && content.abstract.length ? (
 <article id="abstract" onMouseUp={spanSelect}>{content.abstract </article>) : ''}
</div>

My functional component is structured like this

export default function ExternalInfos(props) {
 ...
function spanSelect() { ... }
 return(
  ...
 );
}

And the function I'm trying to call is

let table = [];
    function spanSelect() {
        var span = document.createElement("span");
        span.setAttribute("id","span");
        if (window.getSelection()) {
          var text = window.getSelection();
          if (text.rangeCount) {
            var range = text.getRangeAt(0).cloneRange();
            range.surroundContents(span);
            text.removeAllRanges();
            text.addRange(range);
          };
        };
        let object = window.getSelection().toString();
        table.push(object);
        const annotation = document.getElementById("annotationArea");
        annotation.updateObjectAnnotation(table);
      }

But nothing happens when I select text from my div and it doesn't return an error. How do I solve this?

Answer 1

You need to capitalize the event handler prop: onMouseUp.

From the React docs (https://reactjs.org/docs/handling-events.html):

"React events are named using camelCase, rather than lowercase."