I use Draxview to handle drag and drop between two lists. Overall It works perfectly, but sometimes it crashes with an error message:

• TypeError: undefined is not an object (evaluating 'item.name') *

It's when drag the the draggable item back and forth between the two lists. But it not happends every time. Do anyone have clue of what I should do?

Here is my code:

  const DragUIComponent = ({ item, index }) => {
    return (
      
      <DraxView
      style={[styles.centeredContent, styles.draggableBox]}
      draggingStyle={styles.dragging}
      dragReleasedStyle={styles.dragging}
      hoverDraggingStyle={styles.hoverDragging}
        dragPayload={index}
        longPressDelay={150}
        key={index}
      >
         <View  style={styles.emptyView}>
           
          <Text style={styles.textStyle}>{item.name === null ? '' : item.name}</Text>
          </View>
      </DraxView>
    );
  }

  {HERE I GET THE ERROR}
  //The Receiving Zone Where I drops my draggable element
  const ReceivingZoneUIComponent = ({ item, index }) => {
    return (
      
      <DraxView
        style={[styles.centeredContent, styles.receivingZone]}
        receivingStyle={styles.receiving}
            renderContent={({ viewState }) => {
            try {
            const receivingDrag = viewState && viewState.receivingDrag;
            const payload = receivingDrag && receivingDrag.payload;
            return (
  
              <View style={styles.recView}>
                <Text style={styles.textStyleeRceiving}>{item.name === null ? '' : item.name}</Text>
                </View>
            );
          } catch (error) {
            alert(error);
          }
          }}
        key={index}
        onReceiveDragDrop={(event) => {
          let selected_item = dragItemMiddleList[event.dragged.payload];
          console.log('onReceiveDragDrop::index', selected_item, index);
          console.log('onReceiveDragDrop :: payload', event.dragged.payload);
          let newReceivingItemList = [...receivingItemList];
          console.log('onReceiveDragDrop :: newReceivingItemList', newReceivingItemList);
          newReceivingItemList[index] = selected_item;
          setReceivedItemList(newReceivingItemList);

          let newDragItemMiddleList = [...dragItemMiddleList];
          console.log('onReceiveDragDrop :: newDragItemMiddleList 1', newDragItemMiddleList);
          newDragItemMiddleList[event.dragged.payload] = receivingItemList[index];
          console.log('onReceiveDragDrop :: newDragItemMiddleList 2', newDragItemMiddleList);
          setDragItemListMiddle(newDragItemMiddleList);
        }}
      />
    );
  }

I use Draxview to handle drag and drop between two lists. Overall It works perfectly, but sometimes it crashes with an error message:

• TypeError: undefined is not an object (evaluating 'item.name') *

It's when drag the the draggable item back and forth between the two lists. But it not happends every time. Do anyone have clue of what I should do?

Here is my code:

  const DragUIComponent = ({ item, index }) => {
    return (
      
      <DraxView
      style={[styles.centeredContent, styles.draggableBox]}
      draggingStyle={styles.dragging}
      dragReleasedStyle={styles.dragging}
      hoverDraggingStyle={styles.hoverDragging}
        dragPayload={index}
        longPressDelay={150}
        key={index}
      >
         <View  style={styles.emptyView}>
           
          <Text style={styles.textStyle}>{item.name === null ? '' : item.name}</Text>
          </View>
      </DraxView>
    );
  }

  {HERE I GET THE ERROR}
  //The Receiving Zone Where I drops my draggable element
  const ReceivingZoneUIComponent = ({ item, index }) => {
    return (
      
      <DraxView
        style={[styles.centeredContent, styles.receivingZone]}
        receivingStyle={styles.receiving}
            renderContent={({ viewState }) => {
            try {
            const receivingDrag = viewState && viewState.receivingDrag;
            const payload = receivingDrag && receivingDrag.payload;
            return (
  
              <View style={styles.recView}>
                <Text style={styles.textStyleeRceiving}>{item.name === null ? '' : item.name}</Text>
                </View>
            );
          } catch (error) {
            alert(error);
          }
          }}
        key={index}
        onReceiveDragDrop={(event) => {
          let selected_item = dragItemMiddleList[event.dragged.payload];
          console.log('onReceiveDragDrop::index', selected_item, index);
          console.log('onReceiveDragDrop :: payload', event.dragged.payload);
          let newReceivingItemList = [...receivingItemList];
          console.log('onReceiveDragDrop :: newReceivingItemList', newReceivingItemList);
          newReceivingItemList[index] = selected_item;
          setReceivedItemList(newReceivingItemList);

          let newDragItemMiddleList = [...dragItemMiddleList];
          console.log('onReceiveDragDrop :: newDragItemMiddleList 1', newDragItemMiddleList);
          newDragItemMiddleList[event.dragged.payload] = receivingItemList[index];
          console.log('onReceiveDragDrop :: newDragItemMiddleList 2', newDragItemMiddleList);
          setDragItemListMiddle(newDragItemMiddleList);
        }}
      />
    );
  }

• javascript
• react-native
• drag-and-drop
• draggable

• 1 There are a few places in the code you provided that reference item.name. Wouldn't it be easier to just add protection in the code in those places that checks if item is not null? – tomerpacific Commented Sep 29, 2021 at 20:01
• 1 In what ponent are you getting the error? It seems that you are not passing or wrongly passing item prop when instantiating your ponent. However, I can't see that part in your code. – Ernesto Stifano Commented Sep 29, 2021 at 20:01
• As @ErnestoStifano alluded, can you add the minimal reproducible example of where you're invoking these functions? – esqew Commented Sep 29, 2021 at 20:09

1 Answer 1

This error will occur whenever item is undefined. You can solve this using optional chaining. So wherever you have used item.name === null ? '' : item.name just replace it with item?.name || ''

Your updated code will be:

const DragUIComponent = ({ item, index }) => {
    return (
      
      <DraxView
      style={[styles.centeredContent, styles.draggableBox]}
      draggingStyle={styles.dragging}
      dragReleasedStyle={styles.dragging}
      hoverDraggingStyle={styles.hoverDragging}
        dragPayload={index}
        longPressDelay={150}
        key={index}
      >
         <View  style={styles.emptyView}>
           
          <Text style={styles.textStyle}>{item?.name || ''}</Text>
          </View>
      </DraxView>
    );
  }

  {HERE I GET THE ERROR}
  //The Receiving Zone Where I drops my draggable element
  const ReceivingZoneUIComponent = ({ item, index }) => {
    return (
      
      <DraxView
        style={[styles.centeredContent, styles.receivingZone]}
        receivingStyle={styles.receiving}
            renderContent={({ viewState }) => {
            try {
            const receivingDrag = viewState && viewState.receivingDrag;
            const payload = receivingDrag && receivingDrag.payload;
            return (
  
              <View style={styles.recView}>
                <Text style={styles.textStyleeRceiving}>{item?.name || ''}</Text>
                </View>
            );
          } catch (error) {
            alert(error);
          }
          }}
        key={index}
        onReceiveDragDrop={(event) => {
          let selected_item = dragItemMiddleList[event.dragged.payload];
          console.log('onReceiveDragDrop::index', selected_item, index);
          console.log('onReceiveDragDrop :: payload', event.dragged.payload);
          let newReceivingItemList = [...receivingItemList];
          console.log('onReceiveDragDrop :: newReceivingItemList', newReceivingItemList);
          newReceivingItemList[index] = selected_item;
          setReceivedItemList(newReceivingItemList);

          let newDragItemMiddleList = [...dragItemMiddleList];
          console.log('onReceiveDragDrop :: newDragItemMiddleList 1', newDragItemMiddleList);
          newDragItemMiddleList[event.dragged.payload] = receivingItemList[index];
          console.log('onReceiveDragDrop :: newDragItemMiddleList 2', newDragItemMiddleList);
          setDragItemListMiddle(newDragItemMiddleList);
        }}
      />
    );
  }