'Is there a way to dynamically render a react component with a variable width?
I am working on a First Come First Serve CPU scheduler with JavaScript. The problem I am facing is that for some reason my component for the gantt-chart visualization does not render when it is supposed to (When the calculations are completed). The component however does render when I make a change to the code and the calculations have completed.
It seems as though the rendering is at random as sometimes when I add in a console.log(processes) to see what is happening right before I map the data to a process, 1) the data is there and 2) It randomly will render.
Code for Gantt-Chart component:
export default function GanttChart({processes}) {
return (
<div className="chart-area">
<div className="gantt-chart">
{processes.map((process) => (
<>
<div key={process.processName} className="process" style={{ width: (parseInt(process.burstTime, 10)) + "%" }}>{process.processName}</div>
</>
))}
</div>
</div>
)
}
I'm trying to have this component to render after calcTurnAroundWaitingTime() function executes and the width of each "process" is based upon the burstTime of that process:
Function that handles the FirstComeFirstServe Algorithm:
function handleFCFS(e){
e.preventDefault();
// Pushing the process data from the form to the process array for each process
processData.forEach(process => {
processes.push(process);
});
// Error checking if there are no processes to process by seeing if the first processName === null
if (!processes[0].processName){
alert("Nothing to process");
return;
}
processes.join(); // Joining the array of objects together as a string separated by ,
processes.sort(orderLeastGreatest); // Sorting the string by calling the compare function that compares the objects arrival times
// Calculating completion time
calcCompletionTime(processes);
// Calculating turnaround time and waiting time
calcTurnAroundWaitingTime(processes);
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
