Get div innerHTML onBlur? - html

Question

How can I extract the innerHTML from the onBlur event?
I have previously only used onChange and onClick event handlers. In those cases the event argument (or at least first argument) passed to the callback has been an object from which I have been able to extract event.target.value.
But the onBlur event returns another kind of object:
Proxy {[[Handler]], [[Target]], [[IsRevoked]]}
How do I extract innerHTML from that?
import React, { Component } from "react";
export default class Subject extends Component {
constructor(props) {
super(props);
}
onBlur(event) {
console.log(event);
}
render() {
return (
<div>
<p>subject</p>
<p contenteditable="true" name='subject' onBlur={this.onBlur}>{this.props.subject}</p>
</div>
)
}
}

Answer 1

To get data from contentEditable you can do console.log(event.target.textContent).
So your program will look like
import React, { Component } from "react";
export default class Subject extends Component {
constructor(props) {
super(props);
}
onBlur(event) {
console.log(event.target.textContent);
}
render() {
return (
<div>
<p>subject</p>
<p contentEditable="true" name='subject' onBlur={this.onBlur}>{this.props.subject}</p>
</div>
)
}
}