react: Convert from Class to functional component with state

Question

How would one convert the class component to a functional one?

 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;

I assume one needs to use hooks and destructioning, but not sure how to implement it. Is there a good guidline or best practice to follow?

This [step-by-step guide](https://medium.com/@olinations/10-steps-to-convert-a-react-class-component-to-a-functional-component-with-hooks-ab198e0fa139) isn't bad but I'd recommend really reading up on and building functional components with hooks first instead of just trying to follow a guide. If you're already familiar with functional components and not class components, that guide should help. — LMulvey, Nov 09 '20 at 22:21
There are many guides, tutorials, and official documentation about this subject. Please try to attempt this on your own first and then post back here if you get stuck. — Drew Reese, Nov 09 '20 at 22:25

score 2 · Accepted Answer · answered Nov 09 '20 at 22:37

I gave a brief explanation of what is going on:

const Test = () => {
  // Use state to store value of text input.
  const [value, setValue] = React.useState("test text" /* initial value */);

  // Use state to store whether component is in edit mode or not.
  const [editMode, setEditMode] = React.useState(false /* initial value */);

  // Create function to handle toggling edit mode.
  // useCallback will only generate a new function when setEditMode changes
  const toggleEditMode = React.useCallback(() => {
    // toggle value using setEditMode (provided by useState)
    setEditMode(currentValue => !currentValue);
  }, [
    setEditMode
  ] /* <- dependency array - determines when function recreated */);

  // Create function to handle change of textbox value.
  // useCallback will only generate a new function when setValue changes
  const updateValue = React.useCallback(
    e => {
      // set new value using setValue (provided by useState)
      setValue(e.target.value);
    },
    [setValue] /* <- dependency array - determines when function recreated */
  );

  // NOTE: All hooks must run all the time a hook cannot come after an early return condition.
  // i.e. In this component all hooks must be before the editMode if condition.
  // This is because hooks rely on the order of execution to work and if you are removing
  // and adding hooks in subsequent renders (which react can't track fully) then you will
  // get warnings / errors.

  // Do edit mode render
  if (editMode) {
    return (
      // I changed the component to controlled can be left as uncontrolled if prefered.
      <input
        type="text"
        autoFocus
        value={value}
        onChange={updateValue}
        onBlur={toggleEditMode}
      />
    );
  }

  // Do non-edit mode render.
  return <div onDoubleClick={toggleEditMode}>{value}</div>;
};

and here is a runnable example

score 0 · Answer 2 · answered Mar 11 '22 at 21:03

0

I have released this npm package command line to convert class components to functional components.

It's open source. Enjoy.

https://www.npmjs.com/package/class-to-function

answered Mar 11 '22 at 21:03

ofundefined

2,692
2
18
35

react: Convert from Class to functional component with state

2 Answers2