How to change color of specific elements in array

Question

I am trying to build a sorting Visualizer using React. Right now, I am implementing BubbleSort. The program looks like this:

Here's the code:

class Sorter extends Component {

    state = {
        array: [100,4,214,55,11,22,10,33],
        color: "blueviolet",
    } 

    bubblesorter = async () => {
        let arr = this.state.array
        var len = arr.length,
        i, j, stop;
            for (i=0; i < len; i++){
                    for (j=0, stop=len-i; j < stop; j++){
                        if (arr[j] > arr[j+1]){
                            swap(arr, j, j+1);
                        } 
                        await new Promise(resolve => setTimeout(resolve, 100));
                        this.setState({array:arr})
                    }
                }   
    }

    render() {
        const array = this.state.array
        return (
            <div>
                <h1>This is a sorter</h1>
                <div className="container">
                    {array.map((value, id) => (
                        <span>
                            <div className="bar" key={id} style={{height: value+"px", backgroundColor: this.state.color}}  >
                            </div>
                        </span>
                    ))}
                </div>
                <button onClick={this.bubblesorter}>Sort</button>
            </div>
        )
    }

The sorting functionality works correctly. But I would like to change the color of bars (array elements being compared). Can someone help with the Logic which can be used to implement this...Thanks

Answer 1

Tried this...it works but can be improved using modern javascript (not that familiar with it, suggestions welcome)

class Sorter extends Component {

    state = {
        array: [],
        colors: Array(8).fill('blueviolet'),
    } 
    bubblesorter = async () => {
    ...
                        await new Promise(resolve => setTimeout(resolve, 1000));
                        const colors = []
                        for (let k=0; k<8; k++) {
                            let color = k==j || k==j+1 ? 'red':'blueviolet'
                            colors[k] = color
                        }
                        // console.log(colors)
                        this.setState({ array: arr, colors: colors });
             
              }
      }
      render() 
      {
        // const array = this.state.array
        const { array, colors } = this.state;
        // console.log(array)
        return (
            <div>
                <h1>This is a sorter</h1>
                <div className="container">
                    {array.map((value, id) => (
                        <span>
                            <div 
                                className="bar" 
                                key={id} 
                                style={{ height: value + 'px', backgroundColor: colors[id] 
                             }} >
                            </div>
                            {/* <span>{value}</span> */}
                        </span>
                    ))}
                </div>
                <button onClick={this.bubblesorter}>Sort</button>
            </div>
        )
    }
}

Answer 2

You can make the colors array and update the color which was only changed.

class Sorter extends Component {
    state = {
        array: [100, 4, 214, 55, 11, 22, 10, 33],
        colors: Array(8).fill('blueviolet'),  // Array of colors for each bar
    };

    bubblesorter = async () => {
        ...
                await new Promise((resolve) => setTimeout(resolve, 100));
                
                // Set different item's color as `red`
                const colors = arr.map((item, index) => (this.state.array[index] === item ? 'blueviolet' : 'red'));
                this.setState({ array: arr, colors });
            }
        }
    };

    render() {
        const { array, colors } = this.state;
        return (
            <div>
                <h1>This is a sorter</h1>
                <div className='container'>
                    {array.map((value, id) => (
                        <span>
                            <div
                                className='bar'
                                key={id}
                                // <- Use the color at the same index of the item
                                style={{ height: value + 'px', backgroundColor: colors[id] }}
                            ></div>
                        </span>
                    ))}
                </div>
                <button onClick={this.bubblesorter}>Sort</button>
            </div>
        );
    }
}