how to change functional component to class component in react-sortable-hoc

Question

how to change my functional component to class component my code is below

const SortableList = SortableContainer(
  ({ items, SpeedGraph, StepLengthGraph, CadenceGraph, PaceGraph, graphPopupHandler}) => (
    <div>
      {items.map((value, index) => (
        <SortableItem
          key={`item-${index}`}
          SpeedGraph={SpeedGraph}
          StepLengthGraph={StepLengthGraph}
          CadenceGraph={CadenceGraph}
          PaceGraph={PaceGraph}
          graphPopupHandler={graphPopupHandler}
          index={index}
          value={value}
        />
      ))}
    </div>
  )
);

i try to change this code but not working for me.

Possible duplicate of [How to convert const reactjs component to class based](https://stackoverflow.com/questions/45297329/how-to-convert-const-reactjs-component-to-class-based) — M.R.Safari, Dec 27 '17 at 15:12
Possible duplicate of [Converting React function component to class component issue](https://stackoverflow.com/questions/43695583/converting-react-function-component-to-class-component-issue) — Sulthan, Dec 27 '17 at 15:17

score 1 · Answer 1 · answered Dec 27 '17 at 15:10

This has been answered before (but I have too low rep to flag), and is pretty straightforward using the docs. But here's a start:

class SortableList extends React.Component {
   constructor(props) {
    super(props);
    //any initialization here or in other react class methods
  }

  render() {
    const {items, SpeedGraph, StepLengthGraph, CadenceGraph, PaceGraph, graphPopupHandler} = this.props;
    return <div>
      {items.map((value, index) => (
        <SortableItem
          key={`item-${index}`}
          SpeedGraph={SpeedGraph}
          StepLengthGraph={StepLengthGraph}
          CadenceGraph={CadenceGraph}
          PaceGraph={PaceGraph}
          graphPopupHandler={graphPopupHandler}
          index={index}
          value={value}
        />
      ))}
    </div>;
  }
}

score 0 · Accepted Answer · answered Dec 27 '17 at 15:06

In class components you need to implement render function and return your jsx from this function and access props using this.props

While in functional components you just return jsx directly from function and access props using first argument in that function

class SortableList extends React.Component {
  render(){
    const { items, SpeedGraph, StepLengthGraph, CadenceGraph, PaceGraph, graphPopupHandler} = this.props;
    return(
      <div>
      {items.map((value, index) => (
        <SortableItem
          key={`item-${index}`}
          SpeedGraph={SpeedGraph}
          StepLengthGraph={StepLengthGraph}
          CadenceGraph={CadenceGraph}
          PaceGraph={PaceGraph}
          graphPopupHandler={graphPopupHandler}
          index={index}
          value={value}
        />
      ))}
    </div>
    )
  }
}

how to change functional component to class component in react-sortable-hoc

2 Answers2