I’m attempting to make an arranging formulas visualiser where there are bars as well as when the play switch is clicked a details arranging formula will certainly be computer animated with benches relocating.
I have actually made a range of divs as well as established the history shade of benches. I made one more variety to match the size of benches so when I arrange the variety of sizes I can arrange the variety of bars at the very same time.
const {bars, setBars} = useContext( BarsContext).
const [data, setData] = useState([]).
useEffect(() => > {
setData([]).
setBars([]).
for( allow i= 0; i< [...current, <div className="bar" ref={ref} style={{ height: randomLength, backgroundColor: "#add8e6" }}></div>]).
setData( information => > [...data, randomLength]).
}
}, [value]).
const runAlgorithm = () => > {
if( energetic == "bubble") {
bubbleSort().
} else if( energetic == "combine") {
Mergsort().
} else if( energetic == "option") {
Selectionsort().
}
}
const rest = ms => > brand-new Pledge( r => > setTimeout( r, ms));.
const bubbleSort = async() => > {
allow matter = 0.
console.log( information).
for( allow i= 0; i<< bars.length; i++) {
for( allow j= 0; j<< bars.length; j++) {
console.log( bars[j] props.style.backgroundColor).
bars[j] props.style.backgroundColor="red".
bars[j+1] props.style.backgroundColor="red".
if( information[j] > > information[j+1]) {
allow temperature = information[j+1]
information[j+1] = information[j]
information[j] = temperature.
setData([...data]).
allow temp2 = bars[j+1]
bars[j+1] = bars[j]
bars[j] = temp2.
setBars([...bars]).
wait for rest( 100 );.
}
matter += 1.
console.log( matter).
}
}
console.log( information).
}
In the arranging formula I have actually attempted to transform the history shade to red however a mistake message turns up stating it can not access props undefined despite the fact that when I log it, it exists.
