Why does the react-sortable-hoc basic example fail to compile with typescript?

Question

Here is the basic example from the react-sortable-hoc webpage.

import React, {Component} from 'react';
import {render} from 'react-dom';
import {SortableContainer, SortableElement, arrayMove} from 'react-sortable-hoc';

const SortableItem = SortableElement(({value}) =>
  <li>{value}</li>
);

const SortableList = SortableContainer(({items}) => {
  return (
    <ul>
      {items.map((value, index) => (
        <SortableItem key={`item-${index}`} index={index} value={value} />
      ))}
    </ul>
  );
});

class SortableComponent extends Component {
  state = {
    items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
  };
  onSortEnd = ({oldIndex, newIndex}) => {
    this.setState({
      items: arrayMove(this.state.items, oldIndex, newIndex),
    });
  };
  render() {
    return <SortableList items={this.state.items} onSortEnd={this.onSortEnd} />;
  }
}

render(<SortableComponent/>, document.getElementById('root'));

I had to alter the code above very slightly to fit with typescript import syntax, and the screenshot below shows the errors I am unsure how to fix:

Here is the code corresponding to the above screenshot:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {SortableContainer, SortableElement, arrayMove} from 'react-sortable-hoc';

const SortableItem = SortableElement(({value}) =>
  <li>{value}</li>
);

const SortableList = SortableContainer(({items}) => {
  return (
    <ul>
      {items.map((value, index) => (
        <SortableItem key={`item-${index}`} index={index} value={value} />
      ))}
    </ul>
  );
});

class SortableComponent extends React.Component {
  state = {
    items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
  };
  onSortEnd = ({oldIndex, newIndex}) => {
    this.setState({
      items: arrayMove(this.state.items, oldIndex, newIndex),
    });
  };
  render() {
    return <SortableList items={this.state.items} onSortEnd={this.onSortEnd} />;
  }
}

ReactDOM.render(<SortableComponent/>, document.getElementById('root'));

I don't know how to parse the error text of these errors. Since the project has 5k+ stars on GitHub, I assume I have some sort of config issue, but I can't seem to figure out what it is.

These are the two remaining errors:

1.

[ts] Property 'items' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes

2.

[ts] Property 'value' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes

The error text reads to me like it's not picking up the component wrapping syntax up correctly, but I am unfamiliar with this syntax myself so I'm not sure if I've diagnosed the problem correctly or how to fix it.

Thanks for the help.

Do not post images of code or errors! Images and screenshots can be a nice addition to a post, but please make sure the post is still clear and useful without them. If you post images of code or error messages make sure you also copy and paste or type the actual code/message into the post directly. — Rob
– Rob, Commented Jul 30, 2018 at 0:24
@Rob thank you for this comment. I have added the corresponding code. I will keep the image for a visual indication of where the errors are in the source code. The error text is already in the body of the question — Daniel Kats
– Daniel Kats, Commented Jul 30, 2018 at 1:30
@BlackSheep I just tried your code and it works form me. lastest packages in a clean solution. — Titian Cernicova-Dragomir
– Titian Cernicova-Dragomir, Commented Jul 30, 2018 at 1:39

Brian Adams · Accepted Answer · 2018-07-30 23:33:14Z

14

The code in the basic example in the docs is JavaScript.

Here is the basic example converted to TypeScript:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { arrayMove, SortableContainer, SortableElement } from 'react-sortable-hoc';

const SortableItem = SortableElement(({value}: {value: string}) =>
  <li>{value}</li>
);

const SortableList = SortableContainer(({items}: {items: string[]}) => {
  return (
    <ul>
      {items.map((value, index) => (
        <SortableItem key={`item-${index}`} index={index} value={value} />
      ))}
    </ul>
  );
});

class SortableComponent extends React.Component<{}, {items: string[]}> {
  constructor(props: {}) {
    super(props);
    this.state = {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6']
    }
  }
  public render() {
    return <SortableList items={this.state.items} onSortEnd={this.onSortEnd} />;
  }
  private onSortEnd = ({oldIndex, newIndex}: {oldIndex: number, newIndex: number}) => {
    this.setState({
      items: arrayMove(this.state.items, oldIndex, newIndex),
    });
  };
}

ReactDOM.render(<SortableComponent/>, document.getElementById('root'));

answered Jul 30, 2018 at 23:33

Brian Adams

46.2k12 gold badges123 silver badges115 bronze badges

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

1 Comment

josemigallas Over a year ago

This solves only half of the problem, at least in current version. Typing props won't prevent an error when using the component. This is what I had to do: const SortableItem = SortableElement<{ value: string }>(({ value }: { value: string }) alternatively const SortableItem: React.ComponentClass<SortableElementProps & { value: string }> = SortableElement(Item)

Vladislav Bogdashev · Accepted Answer · 2022-06-21 11:53:26Z

You should specify aditional types for sortable container and sortable item, it will fix your problem:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {SortableContainer, SortableElement, arrayMove, SortableContainerProps, SortableElementProps} from 'react-sortable-hoc';

const SortableItem: React.ComponentClass<SortableElementProps & { value: string }, any> = SortableElement(({ value }: { value: string }) =>
  <li>{value}</li>
);

const SortableList: React.ComponentClass<SortableContainerProps & { items: string[] }, any> = SortableContainer(({ items }: { items: string[] }) => {
  return (
    <ul>
      {items.map((value: any, index: number) => (
        <SortableItem key={`item-${index}`} index={index} value={value} />
      ))}
    </ul>
  );
});

class SortableComponent extends React.Component {
  state = {
    items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
  };
  onSortEnd = ({oldIndex, newIndex}: {oldIndex: number, newIndex: number}) => {
    this.setState({
      items: arrayMove(this.state.items, oldIndex, newIndex),
    });
  };
  render() {
    return <SortableList items={this.state.items} onSortEnd={this.onSortEnd} />;
  }
}

ReactDOM.render(<SortableComponent/>, document.getElementById('root'));

Igor Pavlenko · Accepted Answer · 2019-06-05 11:50:24Z

in case someone needs the code for the optional drag handle I am using mui with ts, I have also included the sample of the 'packageData' let me know in case u need to see the interface?

import React, { Component } from 'react';
import {
  SortableContainer,
  SortableElement,
  SortableHandle
} from 'react-sortable-hoc';
import arrayMove from 'array-move';
import { packageData } from '../../data/packagesData';
import { List } from '@material-ui/core';
import ListItem from '../../components/UI/ListItem/ListItem';
import EditIcon from '@material-ui/icons/DragIndicator';
import { PackageResAdmin } from '../../ts/apiTs';

const DragHandle = SortableHandle(() => <EditIcon />);

const SortableItem = SortableElement(
  ({ id, galleryId, translations }: PackageResAdmin) => (
    <ListItem
      id={id}
      children={<DragHandle />}
      galleryId={galleryId}
      translations={translations}
    />
  )
);
const SortableContainerWrapper = SortableContainer(
  ({ children }: { children: {}[] }) => {
    return <List>{children}</List>;
  }
);

class DndComponent extends Component {
  state = { packageData };

  private onSortEnd = ({
    oldIndex,
    newIndex
  }: {
    oldIndex: number;
    newIndex: number;
  }) => {
    this.setState({
      packageData: arrayMove(this.state.packageData, oldIndex, newIndex)
    });
  };

  render() {
    console.log(this.state);
    return (
      <SortableContainerWrapper onSortEnd={this.onSortEnd} useDragHandle>
        {this.state.packageData.map((res, index) => (
          <SortableItem
            key={`item-${index}`}
            index={index}
            id={res.id}
            galleryId={res.galleryId}
            translations={res.translations}
          />
        ))}
      </SortableContainerWrapper>
    );
  }
}

export default DndComponent;


export const packageData: PackageResAdmin[] = [


{
    galleryId: 1,
    id: 1,
    translations: {
      [Language.CS]: {
        additionalInfo: 'additionalInfo',
        content: 'content',
        language: Language.CS,
        parentId: 1,
        title: 'eden'
      },
      [Language.EN]: {
        additionalInfo: 'additionalInfo',
        content: 'content',
        language: Language.EN,
        parentId: 1,
        title: 'one'
      }
    }
  },
  {
    galleryId: 1,
    id: 2,
    translations: {
      [Language.CS]: {
        additionalInfo: 'additionalInfo',
        content: 'content',
        language: Language.CS,
        parentId: 1,
        title: 'dva'
      },
      [Language.EN]: {
        additionalInfo: 'additionalInfo',
        content: 'content',
        language: Language.EN,
        parentId: 1,
        title: 'two'
      }
    }
  }
];

Collectives™ on Stack Overflow

Why does the react-sortable-hoc basic example fail to compile with typescript?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related