React-beautiful-dnd typescript compiler issues

Question

I just upgraded react and react-beautiful-dnd to the latest versions and I get a lot of type errors. This is my code:

            {sortedDimensions.map((dimension: any, index: number) => (
              <Draggable
                key={index}
                draggableId={`${index}`}
                index={index}
                isDragDisabled={this.props.isEditingView ? true : false}
              >
                {draggable => (
                  <div
                    ref={draggable.innerRef}
                    {...draggable.draggableProps}
                    {...draggable.dragHandleProps}
                  >
                    <DimensionColumn
                      key={`${dimension.id}-${dimension.Name}`}
                      dimension={dimension}
                      validateName={this.isValidDimensionName}
                      isEditingView={this.props.isEditingView}
                    />
                  </div>
                )}
              </Draggable>
            ))}

This is the error I get:

Please advice on a fix. Thanks.

did you update the types as well? https://www.npmjs.com/package/@types/react-beautiful-dnd — diedu, Jun 24 '20 at 14:20

score 2 · Accepted Answer · answered Jun 24 '20 at 14:36

 {(draggable: any) => (
         <div
                    ref={draggable.innerRef}
                    {...draggable.draggableProps}
                    {...draggable.dragHandleProps}
                  >

Try adding () brackets around draggable and add type. And for the other codes you are getting type errors please check if : type is given or not.

React-beautiful-dnd typescript compiler issues

1 Answers1