React-sortable-hoc: How do I return SortableElement from within a Class rather than a Constant?

Created on 4 Apr 2017 · 3Comments · Source: clauderic/react-sortable-hoc

What is the correct syntax for calling SortableXxxxxx in a Class rather than a Constant? I cant' seem to make it work in a class?

const MyElement = SortableElement(observer((props) => {

    return (
        <li> (...do stuff here...) </li>

    )
}));

Should look like

@observer 
class MyElement extends React.Component {

   constructor (props) {
       super(props);
       autobind(this);
   }

   ( ... methods here ... )

    render () {

        return (
           SortableElement( {<li> (...do stuff here...)</li>})     
       );
    }
}

Nothing I have tried seems to work?
What am I clueless about?

Thanks.

Source

curtd59

👍1

Most helpful comment

You need to define your enhanced SortableElement component outside of the render method. Try something like this instead:

class Item extends React.Component {
  render() {
    return (
      <li> (...do stuff here...)</li>
    );
  }
}

const SortableItem = SortableElement(Item);

@observer 
class MyElement extends React.Component {

   constructor (props) {
       super(props);
       autobind(this);
   }

   ( ... methods here ... )

    render () {

        return (
          <SortableItem index={0} (and pass all other relevant props here) />
       );
    }
}

clauderic on 5 Apr 2017

👍6

All 3 comments

Sigh. I'm stuck. Can't progress unless I get past this problem.

curtd59 on 4 Apr 2017

You need to define your enhanced SortableElement component outside of the render method. Try something like this instead:

class Item extends React.Component {
  render() {
    return (
      <li> (...do stuff here...)</li>
    );
  }
}

const SortableItem = SortableElement(Item);

@observer 
class MyElement extends React.Component {

   constructor (props) {
       super(props);
       autobind(this);
   }

   ( ... methods here ... )

    render () {

        return (
          <SortableItem index={0} (and pass all other relevant props here) />
       );
    }
}

clauderic on 5 Apr 2017

👍6

OMG. I get it. Thank you. Thank you. Thank you. :)

curtd59 on 5 Apr 2017

Was this page helpful?

0 / 5 - 0 ratings