Is there anything stopping you from getting the innerText using DOM like this-

var innerText = document.getElementById('elementName').innerText

then passing the value to your reactJS?

window.alert only takes a single parameter, so only the first string is shown. If you pass in too many arguments to a javascript function, the extra parameters will simply be ignored. This is different from console.log, which is a variadic function, meaning it will take any number of parameters and display all of them.

Try alert("text: " + inputRef.current.innerText) instead.

I have a div that is contenteditable and grabbing the div using useRef(), which is a reactjs hook.

When I try to display the text inside the contenteditable div, the alert shows nothing but the log shows the text.

Is there something I am missing?

this is just a snippet I created

export default function Input() {
  const inputRef = useRef();
    
  const showText = () => {
    console.log("text: ", inputRef.current.innerText);
    alert("text: ", inputRef.current.innerText);
  }

  return (
    <>
      <div ref={inputRef} contentEditable="true" supressContentEditableWarning={true} /> 
      <button onClick={showText}>Show text</button>
    </>   
  )
} 

It also does’t work when I use it as a value inside an object eg.

const obj = {
  text: inputRef.current.innerText
}

I will be thankful if someone can help me understand what is going on here!!

UPDATE
just don’t use alert to debug lol.