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 — Reza Safari
– Reza Safari, Commented Dec 27, 2017 at 15:12
Possible duplicate of Converting React function component to class component issue — Sulthan
– Sulthan, Commented Dec 27, 2017 at 15:17

A Code in Work · Accepted Answer · 2017-12-27 15:10:36Z

1

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>;
  }
}

answered Dec 27, 2017 at 15:10

A Code in Work

214 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Amr Labib · Accepted Answer · 2017-12-27 15:06:54Z

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>
    )
  }
}

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related