Search code examples
reactjstypescripttypescript-typingsreact-beautiful-dnd

React-beautiful-dnd typescript compiler issues


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:

enter image description here

Please advice on a fix. Thanks.


Solution

  •  {(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.