typescript type error when passing through snapshot in react-beautiful-dnd

Question

I am trying to use react-beautiful-dnd to create a very simple draggable list of elements. When I try to use snapshot and assign the value of snapshot.isDragging, I get an error.

I then attempted to just give it a bool in general, was still getting an error.

I get a typescript error from this saying that the property doesn't exist.

    29 |         {(provided, snapshot) => (
    30 |           <Container
  > 31 |             isDragging={false}
       |             ^
    32 |             ref={provided.innerRef}
    33 |             {...provided.draggableProps}
    34 |             {...provided.dragHandleProps}

The end goal of the code below (the part that isn't working): is to pass the isDragging attribute from snapshot into Container so that I can use styled-components on it.

The styled component portion is working (I can see it change the color when I mess around with true/false on line 31)

import React, { Component } from "react";
import styled from "styled-components";
import { Draggable } from "react-beautiful-dnd";

interface Props {
  rowEntry?: any;
  index: number;
}
interface State {}

const Container = styled.div`
    border:1px solid lightgrey;
    border-radius:2px;
    padding 8px;
    margin-bottom:8px;
    background-color: ${(props: any) =>
      props.isDragging ? "lightgreen" : "white"};
`;

class AssetRow extends Component<Props, State> {
  state = {};

  render() {
    return (
      <Draggable
        draggableId={this.props.rowEntry.id.toString()}
        index={this.props.index}
      >
        {(provided, snapshot) => (
          <Container
            isDragging={false}
            ref={provided.innerRef}
            {...provided.draggableProps}
            {...provided.dragHandleProps}
          >
            {this.props.rowEntry.itemName}
          </Container>
        )}
      </Draggable>
    );
  }
}

export default AssetRow;

I am loosely following this guide: https://egghead.io/lessons/react-customise-the-appearance-of-an-app-during-a-drag-using-react-beautiful-dnd-snapshot-values

However, they are doing it in javascript.

Answer 1

If anyone encounters this problem down the line, it was because of styled-components. This is what I did to fix it:

interface ContainerProps {
  readonly isDragging: boolean;
}

const Container = styled.div<ContainerProps>`
    border:1px solid lightgrey;
    border-radius:2px;
    padding 8px;
    margin-bottom:8px;
    background-color: ${(props) => (props.isDragging ? "lightgreen" : "white")};
`;

I had to create an interface for the styled.div component so that I could tell the Container that isDragging was a boolean.