the drag and drop feature doesnt work like it supposed to - reactjs

Question

I havent used react this deeply before and i am onfused on what to be done i am not able to figure out why the drag and drop feature is not working as it should please help , i was doing a follow along tutorial and this is exactly what he did and was able to drag and drop the slides and i have checked the entire code and wasnt able to fighure out what was it that i was doing wrong please help
import React, { useState, useEffect } from "react";
import CropOriginalIcon from "#material-ui/icons/CropOriginal";
import Select from "#material-ui/core/Select";
import Switch from "#material-ui/core/Switch";
import CheckBoxIcon from "#material-ui/icons/CheckBox";
import ShortTextIcon from "#material-ui/icons/ShortText";
import SubjectIcon from "#material-ui/icons/Subject";
import MoreVertIcon from "#material-ui/icons/MoreVert";
import { BsTrash } from "react-icons/bs";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
import DragIndicatorIcon from "#material-ui/icons/DragIndicator";
import { Icon, IconButton, MenuItem, Typography } from "#material-ui/core";
import FilterNoneIcon from "#material-ui/icons/FilterNone";
import AddCircleOutlineIcon from "#material-ui/icons/AddCircleOutline";
import OndemandVideoIcon from "#material-ui/icons/OndemandVideo";
import TextFieldsIcon from "#material-ui/icons/TextFields";
import { BsFileText } from "react-icons/bs";
import Accordion from "#material-ui/core/Accordion";
import AccordionSummary from "#material-ui/core/AccordionSummary";
import AccordionDetails from "#material-ui/core/AccordionDetails";
import Button from "#material-ui/core/Button";
import { FcRightUp } from "react-icons/fc";
import Closelcon from "#material-ui/icons/Close";
import Radio from "#material-ui/core/Radio";
import FormControlLabel from "#material-ui/core/FormControlLabel";
import "./Question_form.css";
function Question_form() {
const [questions, setQuestions] = useState([
{
questionText: "Which is the capital city of Karnataka??",
questionType: "radio",
options: [
{ optionText: "Bengaluru" },
{ optionText: "Mandya" },
{ optionText: "Hubli" },
{ optionText: "Mandya" },
],
open: true,
required: false,
},
]);
function changeQuestion(text, i) {
var newQuestion = [...questions];
newQuestion[i].questionText = text;
setQuestions(newQuestion);
console.log(newQuestion);
}
function changeOptionValue(text, i, j) {
var optionsQuestion = [...questions];
optionsQuestion[i].options[j].optionText = text;
setQuestions(optionsQuestion);
console.log(optionsQuestion);
}
function addQuestionType(i, type) {
let qs = [...questions];
console.log(type);
qs[i].questionType = type;
setQuestions(qs);
}
function removeOption(i, j) {
var RemoveOptionQuestion = [...questions];
if (RemoveOptionQuestion[i].options.length > 1) {
RemoveOptionQuestion[i].options.splice(j, 1);
setQuestions(RemoveOptionQuestion);
console.log(i + "_" + j);
}
}
function addOption(i) {
var optionsOfQuestion = [...questions];
if (optionsOfQuestion[i].options.length < 5) {
optionsOfQuestion[i].options.push({
optionText: "option " + (optionsOfQuestion[i].options.length + 1),
});
} else {
console.log("Max 5 options");
}
setQuestions(optionsOfQuestion);
}
function copyQuestion(i) {
let qs = [...questions];
var newQuestion = qs[i];
setQuestions([...questions, newQuestion]);
}
function deleteQuestion(i) {
let qs = [...questions];
if (questions.length > 1) {
qs.splice(i, 1);
}
setQuestions(qs);
}
function requiredQuestion(i) {
var reqQuestion = [...questions];
reqQuestion[i].required = !reqQuestion[i].required;
console.log(reqQuestion[i].required + " " + i);
setQuestions(reqQuestion);
}
function addMoreQuestionField() {
setQuestions([
...questions,
{
questionText: "Question",
questionType: "radio",
options: [{ optionText: "Option 1" }],
open: true,
required: false,
},
]);
}
function onDragEnd(result) {
if (!result.destination) {
return;
}
var itemgg = [...questions];
const itemF = reorder(
itemgg,
result.source.index,
result.destination.index
);
setQuestions(itemF);
}
const reorder = (list, startIndex, endIndex) => {
const result = Array.from(list);
const [removed] = result.splice(startIndex, 1);
result.splice(endIndex, 0, removed);
return result;
};
function questionsUI() {
return questions.map((ques, i) => (
<Draggable key={i} draggableId={i + "id"} index={i}>
{(provided,snapshot) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<div>
<div style={{ marginBottom: "0px" }}>
<div style={{ marginBottom: "0px", width: "100%" }}>
<DragIndicatorIcon
style={{
transform: "rotate(-90deg)",
color: "#DAE0E2",
position: "relative",
left: "300px",
}}
fontSize="small"
/>
</div>
<div>
<Accordion
className={questions[i].open ? "add border" : ""}
expanded={questions[i].open}
>
<AccordionSummary
aria-controls="panel1a-content"
id="panel1a-header"
elevation={1}
style={{ width: "100%" }}
>
{/* {questions[i].open ? (
<div className="saved_questions">
<Typography
style={{
fontSize: "15px",
fontWeight: "400",
letterSpacing: ".1px",
lineHeight: "24px",
paddingBottom: "8px"
}}
>
{i + 1}.{questions[i].questionText}
</Typography>
{ques.options.map((op, j) => (
<div key={j}>
<div style={{ display: "flex" ,}}>
<FormControlLabel
style={{ marginLeft: "5px", marginBottom: "5px" }}
disabled
control={
<input
type={ques.questionType}
color="primary"
style={{ marginRight: "3px" }}
required={ques.type}
/>
}
label={
<Typography
style={{
fontFamily: "Roboto,Arial,sans-serif",
fontSize: "13px",
fontWeight: "400",
letterSpacing: ".2px",
lineHeight: "20px",
color: "#202124",
}}
>
{ques.options[j].optionText}
</Typography>
}
/>
</div>
</div>
))}
</div>
) :
""
} */}
</AccordionSummary>
<div className="question_boxes">
<AccordionDetails className="add_question">
<div className="add_question_top">
<input
type="text "
className="question"
placeholder="Question"
value={ques.questionText}
onChange={(e) => {
changeQuestion(e.target.value, i);
}}
></input>
<CropOriginalIcon style={{ color: "#5f6368" }} />
<Select
className="select"
style={{ color: "#5f6368", fontSize: "13px" }}
>
<MenuItem
id="text"
value="Text"
onClick={() => {
addQuestionType(i, "text");
}}
>
<SubjectIcon style={{ marginRight: "10px" }} />
Paragraph
</MenuItem>
<MenuItem
id="checkbox"
value="Checkbox"
onClick={() => {
addQuestionType(i, "checkbox");
}}
>
<CheckBoxIcon
style={{
marginRight: "10px",
color: "#70757a",
}}
checked
/>
CheckBoxes
</MenuItem>
<MenuItem
id="radio"
value="Radio"
onClick={() => {
addQuestionType(i, "radio");
}}
>
<Radio
style={{
marginRight: "10px",
color: "#70757a",
}}
checked
/>
Multiple Choice
</MenuItem>
</Select>
</div>
{ques.options.map((op, j) => (
<div className="add_question_body" key={j}>
{ques.questionType !== "text" ? (
<input
type={ques.questionType}
style={{ marginRight: "10px" }}
/>
) : (
<ShortTextIcon style={{ marginRight: "10px" }} />
)}
<div>
<input
type="text"
className="text_input"
placeholder="option"
value={ques.options[j].optionText}
onChange={(e) => {
changeOptionValue(e.target.value, i, j);
}}
></input>
</div>
<CropOriginalIcon style={{ color: "#5f6368" }} />
<IconButton aria-label="delete">
<Closelcon
onClick={() => {
removeOption(i, j);
}}
/>
</IconButton>
</div>
))}
{ques.options.length < 5 ? (
<div className="add_question_body">
<FormControlLabel
disabled
control={
ques.questionText !== "text" ? (
<input
type={ques.questionType}
color="primary"
inputProps={{
"aria-label": "secondary checkbox",
}}
style={{
marginLeft: "10px",
marginRight: "10px",
}}
disabled
/>
) : (
<ShortTextIcon
style={{ marginRight: "10px" }}
/>
)
}
label={
<div>
<input
type="text"
className="text_input "
style={{ fontSize: "13px", width: "60px" }}
placeholder="Add other"
></input>
<Button
size="small"
onClick={() => {
addOption(i);
}}
style={{
textTransform: "none",
color: "#4285f4",
fontSize: "13px",
fontWeight: "600",
}}
>
Add options
</Button>
</div>
}
/>
</div>
) : (
""
)}
<div className="add_footer">
<div className="add_question_bottom_left">
<Button
size="small"
style={{
textTransform: "none",
color: "4285f4",
fontSize: "13px",
fontWeight: "600",
}}
>
<FcRightUp
style={{
border: "2px solid #4285f4",
padding: "2px",
marginRight: "8px",
}}
/>
Answer Key
</Button>
</div>
<div className="add_question_bottom">
<IconButton
aria-label="Copy"
onClick={() => {
copyQuestion(i);
}}
>
<FilterNoneIcon />
</IconButton>
<IconButton
aria-label="delete"
onClick={() => {
deleteQuestion(i);
}}
>
<BsTrash />
</IconButton>
<span
style={{ color: "#5f6368", fontSize: "13px" }}
>
required
</span>
<Switch
name="checkedA"
color="primary"
onClick={() => {
requiredQuestion(i);
}}
value={ques.type}
/>
<IconButton>
<MoreVertIcon />
</IconButton>
</div>
</div>
</AccordionDetails>
<div className="question_edit">
<AddCircleOutlineIcon
onClick={addMoreQuestionField}
className="edit"
/>
<OndemandVideoIcon className="edit" />
<CropOriginalIcon className="edit" />
<TextFieldsIcon className="edit" />
</div>
</div>
</Accordion>
</div>
</div>
</div>
</div>
)}
</Draggable>
));
}
return (
<div>
<div className="question_form">
<br></br>
<div className="section">
<div className="question_title_section">
<div className="question_form_top">
<input
type="text"
className="question_form_top_name"
style={{ color: "black" }}
placeholder="Untitled Document"
></input>
<input
type="text"
className="question_form_top_desc"
placeholder="Form description"
></input>
</div>
</div>
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="droppable">
{(provided, snapshot) => (
<div
className="droppable"
{...provided.droppableProps}
ref={provided.innerRef}
>
{questionsUI()}
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
</div>
</div>
</div>
)
}
export default Question_form;
/*here i am not able to drag and drop the element please help */