Pass ref to function with looped id? - reactjs

Question

I'm trying to create a very simple CMS that allows the user to update certain areas on the page.
I have a h3 tag where I want to be able to pass a ref to my onChange function so that I can grab it's innerHTML text (that gets changed by contentEditable) and pass on the new data that gets changed to my back-end server. However, I'm having trouble being able to grab the innerHTML (of the new data) of the correct looped h3 that wants to get changed.
I read documentation online that ref would help me with this but it only gives me an example of where it does it in the render method instead of how to pass it to a function within the ref.
In short, I want to be able to modify my h3 tag (within the cms) with new data and send it to my back-end server to upload to my db.
Also, I tried playing around with not putting it inside of a function and I manage to get access to the myRef.current however in the console it shows as null I want to be able to get access to the specified ref's blogTopic Id so I know which mapped id I'm sending to my back-end server.
I have a lot of code so I'm only going to show the part where I'm stuck on:
class Blogtopics extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
this.state = {
blogData: [],
blogTopic: "",
};
}
Selectblogtopics = async () => {
const blogTopics = await blogtopicsService.selectblogTopics();
this.setState({
blogData: blogTopics
});
};
editorData = (event, content) => {
let data = content.getData();
//this.setState({ blogContent: data });
};
onChange = (event, content) => {
const node = this.myRef;
//where im stuck
console.log(node);
};
render() {
const node = this.myRef;
console.log(node);
return (
{this.state.blogData.map((rows, index) => (
<div className="blogWrapper" key={uuid()}>
<div className="col-md-6">
<h3
suppressContentEditableWarning
contentEditable={this.state.isEditing}
style={
this.state.isEditing === true
? { border: "1px solid #000", padding: "5px" }
: null
}
onInput={e => this.onChange(e)}
ref={e => this.onChange(e, this.myRef)}
//onBlur={e => this.onChange(e)}
>
{rows.blog_category}
</div>
))}
);
}
}
export default Blogtopics;

Answer 1

onChange = (event) => {
const nodeContent = this.myRef.current.innerHTML;
console.log(nodeContent);
};
<h3 ... ref={this.myRef} onInput={this.onChange} ... >
will work. But since onInput passes target element you don't even need to use ref:
onChange = ({ target }) => {
console.log(target.innerHTML);
}
<h3 onInput={this.onChange} >