I seem to be facing a challenge with data consistency caused by the for (const object of results) {} loop in the Sandbox Link at line41. The issue is that the results are displayed as a single result after using the .map() method. However, when I perform a console.log([toDoTasks]); in line79, all the results are displayed correctly.
Note: Please Check the SandBox console
- My question is whether there is an alternative way to fetch, for example
, theconst title: string = object.get("title");propsfor theobjectwhich would return all the results and not just a single result?
import "./ExploreContainer.css";
import { useCallback, useState, useEffect } from "react";
const Parse = require("parse");
interface ContainerProps {}
const ExploreContainer: React.FC<ContainerProps> = () => {
var [toDoTasks, setToDoTasks] = useState({
objectId: "", //string
title: "", //string
description: "", //string
task: "", //string
isCompleted: Boolean(), //boolval
createdAt: new Date(), //new Date()
updatedAt: new Date() //new Date() to update the current time
});
//var query = new Parse.Query("ToDo");
const readTasks = useCallback(async function (): Promise<Boolean> {
// extend todo
// Simple syntax to create a new subclass of Parse.Object.
const ToDo: Parse.Object[] = Parse.Object.extend("ToDo");
//parse query
const parsequery: Parse.Query = new Parse.Query(ToDo);
//const memoizedValue = useMemo(() => (""), [] );
try {
const results: Parse.Object[] = await parsequery.find();
//ID MUST BE PARSED AND STRINGIFIED
var resultsObj = JSON.parse(JSON.stringify(results));
let id = resultsObj[0].objectId;
//console.log(id);
// alternative option
//get by parameter
//console.log(parsequery.equalTo('objectId', id));
console.log(JSON.stringify(results));
for (const object of results) {
//Accessing the Parse Object attributes
const title: string = object.get("title");
const description: string = object.get("description");
const task: string = object.get("task");
const isCompleted: boolean = object.get("isCompleted");
const createdAt: Date = object.get("createdAt");
const updatedAt: Date = object.get("updatedAt");
let resultsfix = {
objectId: id, //string
title: title, //string
description: description, //string
task: task, //string
isCompleted: isCompleted, //boolval
createdAt: createdAt, //new Date()
updatedAt: updatedAt //new Date() to update the current time
};
setToDoTasks(resultsfix);
}
return true;
} catch (error) {
console.error("Error has been found in getAllTasks()" + error);
return false;
}
}, []);
useEffect(() => {
readTasks();
}, [readTasks]);
return (
<>
{toDoTasks !== null &&
toDoTasks !== undefined &&
//ARRAY NEEDS TO BE ASSIGNED TO
[toDoTasks].map((todo: any, item: any) => {
//DISPLAY RESULTS HERE BUT IN GUI DISPLAYS ONLY SIGNLE RESULT
console.log([toDoTasks]);
console.log([todo?.title?.toLocaleLowerCase()]);
return (
<div key={todo + item}>
<h5>{[todo?.title?.toLocaleUpperCase() || " "]}</h5>
{[todo?.task?.toLocaleLowerCase() || " "]}
<h5 className="ion-text-white">
<strong>Description</strong>
</h5>
<em>{[todo?.description?.toLocaleLowerCase() || " "]}</em>
<table>
<thead>
<tr>
<th>ObjectId</th>
<th>Done?</th>
<th>Created </th>
<th>Updated </th>
</tr>
</thead>
<tbody>
<tr>
<td> {JSON.stringify(todo?.objectId)}</td>
<td>
<p
className={
todo?.isCompleted === true
? "todo_text-done"
: "todo_text"
}
>
{todo?.isCompleted?.toString()}
</p>
</td>
<td>{todo?.createdAt?.toDateString()}</td>
<td>{todo?.updatedAt?.toDateString()}</td>
</tr>
</tbody>
</table>
</div>
);
})}
</>
);
};
export default ExploreContainer;