How To Change Color Of Specific Elements In Array

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 {

Solution 1:

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>
        );
    }
}

Solution 2:

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>
        )
    }
}