reactjs - react: クラスから状態付きの機能コンポーネントに変換します

Question

クラスコンポーネントを関数コンポーネントに変換するにはどうすればよいでしょうか?

 import React, { Component } from 'react'

class Test extends Component {

 state = {
   value: "test text", 
   isInEditMode: false



 }
    
changeEditMode = () => {
    this.setState({
        isInEditMode: this.state.isInEditMode
    });
};

updateComponentValue = () => {
    this.setState({
        isInEditMode: false,
        value: this.refs.theThexInput.value
    })
}

renderEditView = () => {
    return (
        <div>
            <input type="text" defaultValue={this.state.value} ref="theThexInput" /> 
            <button onClick={this.changeEditMode}>X</button>
            <button onClick={this.updateComponentValue}>OK</button>
        </div>
    );
};

renderDefaultView = () => {
    return (
        <div onDoubleClick={this.changeEditMode}
        {this.state.value}>
</div>
};

render() {
    return this.state.isInEditMode ? 
        this.renderEditView() :
        this.renderDefaultView()
}}

export default Test;

フックと破壊を使用する必要があると思いますが、実装方法がわかりません。従うべき適切なガイドラインまたはベストプラクティスはありますか?