Why i cant return h1 element in reactJs onClick

Question

I shorten my question, but now it look really silly, my main problem is i want to return html tag, in the question i am using just a literal string,

my function is working fine as console log is working fine, seeing the output i understand is this, i am firing the function at the wrong place, but i am really confused about it.

Below is my code, Please read the comment with the code, and this not the actual problem, but i dont want to dump my full code here, again main problem console.log line is working but not the return line in the function

import React from 'react';

export default class Event extends React.Component {

    onEdit()
    {
        console.log('it will return this'); **//This line work**
        return 'Why i am not able to return this'; **//This one is not showing** why ??

    }
    render(){
        return(
        <div>
        <button onClick={this.onEdit.bind(this)}>Edit</button>

        </div>
        );
    }
}

Answer 1

Your function is definitely returning a string - It seems like you are very confused... You need to return jsx and trigger a re render if you expect this to appear in the DOM

here is an example of what I mean https://fiddle.jshell.net/46hbpmna/