React function not returning <div> element - reactjs

Question

In the following code:
class App extends React.Component {
state = { val: '' };
handleChange = (e) => {
this.setState({ val: e.target.value });
}
OddEven(num) {
const number = parseInt(num);
let description;
if (Number.isInteger(number)) {
if (number % 2 == 0) {
description = <strong>even</strong>;
} else {
description = <i>odd</i>;
}
alert(number);
return (
<h1>
Test
</h1>
);
} else {
return null;
}
}
render() {
return (
<div>
<input type='text' onChange={this.handleChange} />
<button onClick={() =>this.OddEven(this.state.val) }>
Odd Even
</button>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
the OddEven() is not returning the div. Can't figure out why for the last 2 hours. I'm in the learning phase. So don't get offended if it's something silly.

Answer 1

if you want to return your description here is how to do it:
class App extends React.Component {
state = {
val: '',
description: null,
};
handleChange = (e) => {
this.setState({ val: e.target.value });
}
OddEven(num) {
const number = parseInt(num);
let {description} = this.state;
if (Number.isInteger(number)) {
if (number % 2 == 0) {
description = <strong>even</strong>;
} else {
description = <i>odd</i>;
}
this.setState({description: description});
} else {
this.setState({description: null});
}
}
render() {
return (
<div>
<input type='text' onChange={this.handleChange} />
<button onClick={() =>this.OddEven(this.state.val) }>
Odd Even Check?
</button>
{this.state.description}
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);

Answer 2

That is because you are not rendering what your function returns anywhere, what you would rather want to do is this:
class App extends React.Component {
state = { val: "", oddeven: "" }
handleChange = e => {
this.setState({ val: e.target.value })
}
OddEven = () => {
const number = parseInt(this.state.val) //Use the state directly
let description
if (Number.isInteger(number)) {
if (number % 2 == 0) {
description = <strong>even</strong>
} else {
description = <i>odd</i>
}
alert(number)
this.setState({ oddEven: "Hello" })
} else {
return null
}
}
render() {
return (
<div>
<input type="text" onChange={this.handleChange} />
<button onClick={this.OddEven}>Odd Even</button> {/* you do not need to passs the state here, you can directly access it in your function */}
{this.state.oddEven && <h1>{this.state.oddEven}</h1>} {/* Here we check if oddEven exists and then we display whatever we set in the OddEven function}
</div>
)
}
}
Here we set the state to what you want to render and then use that inside our render function.

Answer 3

Try This :
class App extends React.Component {
state = { val: '' };
handleChange = (e) => {
this.setState({ val: e.target.value });
}
OddEven(num) {
const number = parseInt(num);
if (Number.isInteger(number)) {
if (number % 2 == 0) {
return <strong>even</strong>;
} else {
return <i>odd</i>;
}
} else {
return <a>Please Enter A Number</a>;
}
}
render() {
return (
<div>
<input type='text' onChange={this.handleChange} />
{OddEven(this.state.val)}
</div>
);
}