I want to display a set of questions, which when the user adds, are displayed in a react table. For this, I am using a react-datatable component. However, I am having issues with the data being re-rendered when edited. The data does re-render on delete but for edit, it simply removes the row which needs to be edited instead of changing it with the new value. Following is my code;
import axios from "axios";
import React, { useEffect, useState } from "react";
import DataTable from "react-data-table-component";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import Dialog from "./Dialog";
import { testActions } from "../../store";
export default function QuestionTable(props) {
const navigate = useNavigate();
const dispatch = useDispatch();
const test = useSelector((state) => state.test);
const columns = [
{
name: "Question",
selector: (row) => row.Statement,
width: "40em",
headerStyle: () => {
return { textAlign: "center" };
},
},
{
name: "Option 1",
selector: (row) => row.option1,
},
{
name: "Option 2",
selector: (row) => row.option2,
},
{
name: "Option 3",
selector: (row) => row.option3,
},
{
name: "Option 4",
selector: (row) => row.option4,
},
{
name: "Answer",
selector: (row) => row.answer,
},
{
name: "Delete",
cell: (row) => (
<button
onClick={(event) => {
event.preventDefault();
//console.log(row);
dispatch(
testActions.delete({
testQuestion: row,
})
);
}}
>
Delete
</button>
),
},
{
name: "Edit",
cell: (row) => (
<button
onClick={function edit(event) {
event.preventDefault();
console.log(row);
navigate("/dialog",{ state: {row:row,} });
}}
>
Edit
</button>
),
},
];
console.log(test) // This gives the edited test list, however it isn't edited in the table.
return (
<div>
<DataTable
title="Questions"
columns={columns}
data={test}
fixedHeader
pagination
responsive
/>
</div>
);
}
Following is the Dialog.js component, which takes users input to edit data.
import React from 'react'
import { useNavigate } from "react-router-dom";
import { useLocation } from 'react-router-dom';
import { useDispatch, useSelector } from "react-redux";
import { testActions } from "../../store";
const Dialog = (props) => {
const loc = useLocation();
const [newQuestions, setnewQuestions] = React.useState([]);
const test = useSelector((state) => state.test);
const [editQuestion, seteditQuestion] = React.useState({
Statement_: "",
testOption_: false,
option1_: "",
option2_: "",
option3_: "",
option4_: "",
answer_: "",
});
const navigate=useNavigate();
const dispatch=useDispatch();
console.log(loc.state)
let {row}=loc.state;
return (
<div>
<div className="auth-inner2">
<form>
<div className="row">
<h6 className="testLabel">Add Question</h6>
<div className="row">
<div className="form-group col-md-10">
<label htmlFor="question" className="sr-only">
Question
</label>
<input
id="question"
className="form-control "
type="text"
name="question"
placeholder="Question"
onChange={(event) => {
seteditQuestion((prevState) => ({
...prevState,
["Statement_"]: event.target.value,
}));
}}
/>
</div></div>
<div className="form-group col-md-2">
<div className="form-check">
<input
className="form-check-input"
type="checkbox"
id="haveOptions"
onChange={(event) => {
if (event.target.checked === true) {
document.getElementById("option").style.display = "block";
} else {
document.getElementById("option").style.display = "none";
}
seteditQuestion((prevState) => ({
...prevState,
["testOption_"]: event.target.checked,
}));
}}
/>
<label className="form-check-label" htmlFor="haveOptions">
Enable Options
</label>
</div>
</div>
</div>
<div id="option" style={{ display: "none" }}>
<div className="row">
<div className="form-group col-md-5">
<label htmlFor="option1" className="sr-only">
Option 1
</label>
<input
id="option1"
className="form-control"
type="text"
name="option1"
placeholder="Option 1"
onChange={(event) => {
seteditQuestion((prevState) => ({
...prevState,
["option1_"]: event.target.value,
}));
}}
/>
</div>
<div className="form-group col-md-5">
<label htmlFor="option2" className="sr-only">
Option 2
</label>
<input
id="option2"
className="form-control"
type="text"
name="option2"
placeholder="Option 2"
onChange={(event) => {
seteditQuestion((prevState) => ({
...prevState,
["option2_"]: event.target.value,
}));
}}
/>
</div>
</div>
<div className="row">
<div className="form-group col-md-5">
<label htmlFor="option3" className="sr-only">
Option 3
</label>
<input
id="option3"
className="form-control"
type="text"
name="option3"
placeholder="Option 3"
onChange={(event) => {
seteditQuestion((prevState) => ({
...prevState,
["option3_"]: event.target.value,
}));
}}
/>
</div>
<div className="form-group col-md-5">
<label htmlFor="option4" className="sr-only">
Option 4
</label>
<input
id="option4"
className="form-control"
type="text"
name="option4"
placeholder="Option 4"
onChange={(event) => {
seteditQuestion((prevState) => ({
...prevState,
["option4_"]: event.target.value,
}));
}}
/>
</div>
<div className="form-group col-md-6">
<label className="form__label">Select Correct Answer</label>
<select className="form-select" defaultValue={editQuestion.option1_} id="salarytype" onChange={(event) => {
seteditQuestion((prevState) => ({
...prevState,
["answer_"]: event.target.value,
}));
}} >
<option>{editQuestion.option1_}</option>
<option>{editQuestion.option2_}</option>
<option>{editQuestion.option3_}</option>
<option>{editQuestion.option4_}</option>
</select>
</div>
</div>
</div>
<div className="testbtn">
<button type="submit" className="button" onClick={
(event)=>{
event.preventDefault();
console.log(editQuestion)
dispatch(testActions.edit({
row: row,
editTest: editQuestion,
}));
navigate("/createtest")
}} >
Submit
</button>
</div>
</form>
</div>
</div>
);
}
export default Dialog
