I am trying to implement a drag and drop functionality to the ButtonBeginningPages components with react-beautiful-dnd, when I drag a component to another place it does not change its place, it returns to its original place
/* eslint-disable */
import React from 'react'
import PropTypes from 'prop-types'
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
// import {
// FaFeatherAlt, FaPencilAlt, FaRegListAlt
// } from 'react-icons/fa'
// import { GiBookCover, GiSpellBook } from 'react-icons/gi'
import Tooltip from 'Components/Tooltip'
import Spinner from 'Components/Spinner'
import AccordionBox from './AccordionBox'
import AccordionSection from './AccordionSection'
import ButtonBeginningPages from './ButtonBeginningPages'
import ButtonEndingPages from './ButtonEndingPages'
import AddNewCta from './AddNewCta'
import css from './LeftNav.scss'
import TotalPageCount from "../_components/TotalPageCount";
const LeftNav = ({
coverPageIsUpdating,
titlePageIsUpdating,
dedicationPageIsUpdating,
introductionPageIsUpdating,
isContributor, displayedScreen,
selectedSectionId, sectionsOrder, sectionsList, updateCurrentPage,
contentNavProps, toggleBeginningNav, toggleRecipesNav
}) => {
const { beginningPagesIsOpen, recipesIsOpen } = contentNavProps
// const beginningPagesScreenNameList = ['coverPage', 'titlePage', 'dedicationPage', 'introductionPage', 'tocPage']
// const beginningPagesOpen = beginningPagesScreenNameList.includes(displayedScreen)
const sectionsArray = sectionsOrder.map(_sectionId => ({
id: _sectionId,
name: sectionsList[_sectionId].title
}))
return (
<div className={css.nav}>
<TotalPageCount />
<DragDropContext>
<Droppable droppableId="beginningPages">
{(provided) => (
<div ref={provided.innerRef} {...provided.droppableProps}>
<AccordionBox
text="Beginning Pages"
isOpen={beginningPagesIsOpen}
toggle={toggleBeginningNav}
rightCta={<div className={css.tooltip}><Tooltip /></div>}
>
<Draggable draggableId="frontCover" index={0}>
{(provided) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<ButtonBeginningPages
text="Front Cover"
icon={coverPageIsUpdating ? <Spinner size="small" /> : null}
active={displayedScreen === 'coverPage'}
canEditPage={!isContributor}
onClick={() => { updateCurrentPage({ type: 'coverPage' }) }}
/>
</div>
)}
</Draggable>
<Draggable draggableId="titlePage" index={1}>
{(provided) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<ButtonBeginningPages
text="Title Page"
icon={titlePageIsUpdating ? <Spinner size="small" /> : null}
active={displayedScreen === 'titlePage'}
canEditPage={!isContributor}
onClick={() => { updateCurrentPage({ type: 'titlePage' }) }}
/>
</div>
)}
</Draggable>
<Draggable draggableId="dedicationPage" index={2}>
{(provided) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<ButtonBeginningPages
text="Dedication"
isUpdating={dedicationPageIsUpdating}
icon={dedicationPageIsUpdating ? <Spinner size="small" /> : null}
active={displayedScreen === 'dedicationPage'}
canEditPage={!isContributor}
onClick={() => { updateCurrentPage({ type: 'dedicationPage' }) }}
/>
</div>
)}
</Draggable>
<Draggable draggableId="introductionPage" index={3}>
{(provided) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<ButtonBeginningPages
text="Introduction"
isUpdating={introductionPageIsUpdating}
icon={introductionPageIsUpdating ? <Spinner size="small" /> : null}
active={displayedScreen === 'introductionPage' || displayedScreen === 'introductionSubpage'}
canEditPage={!isContributor}
onClick={() => { updateCurrentPage({ type: 'introductionPage' }) }}
/>
</div>
)}
</Draggable>
<Draggable draggableId="tocPage" index={4}>
{(provided) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<ButtonBeginningPages
text="Table of Contents"
active={displayedScreen === 'tocPage'}
canEditPage={!isContributor}
onClick={() => { updateCurrentPage({ type: 'tocPage' }) }}
/>
</div>
)}
</Draggable>
</AccordionBox>
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
<AccordionBox
text="Recipes"
rightCta={<AddNewCta sectionsArray={sectionsArray} />}
isOpen={recipesIsOpen}
toggle={toggleRecipesNav}
>
{sectionsOrder && sectionsOrder.map(sectionId => (
<AccordionSection
id={sectionId}
sectionsArray={sectionsArray}
key={`section-list-item-${sectionId}`}
/>
))}
</AccordionBox>
<ButtonEndingPages
text="Index"
active={displayedScreen === 'indexPage'}
onClick={() => { updateCurrentPage({ type: 'indexPage' }) }}
/>
<ButtonEndingPages
text="Back Cover"
active={displayedScreen === 'backCoverPage'}
onClick={() => { updateCurrentPage({ type: 'backCoverPage' }) }}
/>
</div>
)
}
LeftNav.propTypes = {
coverPageIsUpdating: PropTypes.bool.isRequired,
titlePageIsUpdating: PropTypes.bool.isRequired,
dedicationPageIsUpdating: PropTypes.bool.isRequired,
introductionPageIsUpdating: PropTypes.bool.isRequired,
displayedScreen: PropTypes.string.isRequired,
isContributor: PropTypes.bool,
selectedSectionId: PropTypes.string,
sectionsOrder: PropTypes.arrayOf(PropTypes.string).isRequired,
sectionsList: PropTypes.shape({}).isRequired,
updateCurrentPage: PropTypes.func.isRequired
}
LeftNav.defaultProps = {
isContributor: false,
selectedSectionId: null
}
export default LeftNav
I am trying to implement a drag and drop functionality to the ButtonBeginningPages components with react-beautiful-dnd, when I drag a component to another place it does not change its place, it returns to its original place