Unable to update the text using useState - reactjs

Question

I am converting a class based component to a functional component
But in functional component state is not getting updated.
Could you please update what might be the issue.
I tried putting a alert & its working
I have converted previously working below code-base :
class Spice extends React.Component {
constructor() {
super();
this.state = {
title: 'Welcome to XYZ '
};
}
nameChangeFunction() {
this.setState({
title: 'Welcome to Authentic XYZ World'
});
}
And the Calling Snippet:
render() {
const spiceList = [
..,
..,
..
];
return (
<div>
<h1>{this.state.title}</h1>
<button className='tc ma5' onClick={() => this.nameChangeFunction()}>
Check Out
</button>
<br />
</div>
);
}
New functional component is created as below, but its not updating the title, onClick.
const SpiceHookBased = () => {
const [title, setTitle] = useState("INITIAL XYZ Title");
const changeTitle = () => {
return setTitle("some value changed");
}
return {
render() {
const spiceList = [
..,
..,
..
];
return (
<div>
<h1>{title}</h1>
<button className='tc ma5' onClick={changeTitle}>
</button>
);
}
}
}
In second case, its not updating new text title.
Kindly suggest a correction
Thanks

Answer 1

In the codesnippet there was multiple return and render. See the below codesnippet and check
Apart from that the code looks fine, you can remove the return and write it in a single line
import React, { useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
const App = () => {
const [title, setTitle] = useState("INITIAL XYZ Title");
const changeTitle = () => setTitle("some value changed")
return (
<div>
<h1>{title}</h1>
<button className="tc ma5" onClick={changeTitle}>
Click Me to change title
</button>
</div>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Working codesandbox

Answer 2

You don't need to return the setTitle function in your update function.
Also there is no need for the render() method in functional components, when you return an object like you are doing it just turns the component into a regular function, not a react Component, so that is likely the reason your useState hooks aren't working.
Try changing your functional component to this:
const SpiceHookBased = () => {
const [title, setTitle] = useState("INITIAL XYZ Title");
const changeTitle = () => {
setTitle("some value changed");
}
return (
<div>
<h1>{title}</h1>
<button className='tc ma5' onClick={changeTitle}>
</button>
);
}
EDIT: I saw on another answer you said you are using this component elsewhere which "does the final job of rendering". That is the problem, you are essentially trying to use this component as a function, which doesn't understand react hooks, and thats why the hooks aren't working. If you want to use that type of pattern you need to return a new Component with any added props that you need.