Converting from class to functional component ReactJS - reactjs

Question

I'm trying to build a TicTacToe application.
Problem occured when I tried to convert from class to func. components.
I'm familiar with setting the state variable and the function to change the state of the variable, but passing into the return... i get confused.
import React from "react";
class Endgame extends React.Component {
state = {
tied: "You guys tied",
playerWin: "You win " + this.props.winner + " !!",
};
handleClick = () => {
this.props.endgame(false);
};
render() {
const { winner } = this.props;
const { tied, playerWin } = this.state;
return (
<div className="wrapper">
<div className="screen">
<p>{winner === "Tied" ? tied : playerWin}</p>
<button className="btn-primary" onClick={this.handleClick}>
Start again?
</button>
</div>
</div>
);
}
}
export default Endgame;

Answer 1

import React, { useState } from "react";
const Endgame=({winner,endgame})=>{
const [state,setState]=useState({
tied: "You guys tied",
playerWin: `You win ${winner} !!`,
})
const handleClick = () => {
endgame(false);
};
return (
<div className="wrapper">
<div className="screen">
<p>{winner === "Tied" ? state.tied : state.playerWin}</p>
<button className="btn-primary" onClick={handleClick}>
Start again?
</button>
</div>
</div>
);
}
export default Endgame;
here it is converted into functional component

Answer 2

You can easly transform this component in function component in this way:
import React, { useState } from "react";
const Endgame = ({ winner, endgame }) => {
const [tied, setTied] = useState("You guys tied");
const [playerWin, setPlayerWin] = useState("You win " + winner + " !!");
const handleClick = (e) => {
endgame(false);
};
return (
<div className="wrapper">
<div className="screen">
<p>{winner === "Tied" ? tied : playerWin}</p>
<button className="btn-primary" onClick={handleClick}>
Start again?
</button>
</div>
</div>
);
}
export default Endgame;
This is an intersting article that explains step by step how to convert component to funcional component.