ReactJS - Change Button Text For a Specific Button on an Event

Question

React newbie here,

EDIT: Sorry, I forgot to add the eventListener code. Then render will just output {this.state.songs}. This is separate from the code I posted above and from a modified version of the code I posted above.

import React, { Component } from 'react';

class AudioList extends Component {
    constructor (props) {
        super(props);

        this.state = {
            songs: ''
        }

        this.audios = [];
        for (let i = 0; i < this.props.songs.length; i++) {
            this.audios.push(new Audio(this.props.songs[i].song_url));
        }
    }

    componentWillMount() {
        const songs = [];
        for (let i = 0; i < this.props.songs.length; i++) {
            this.audios[i].addEventListener('play', () => console.log('Play'));
            songs.push(
                <div className='song-preview'>
                    <button className='preview' onClick={() => this.toggle(this.audios[i])}>Preview {i}</button>
                </div>
            )
        }

        this.setState({
            songs: songs
        })

    }

    componentWillUnmount() {
        for (let i = 0; i < this.props.songs.length; i++) {
            this.audios[i].pause();
        }
    }

    getCurrentAudio () {
        return this.audios.find(audio => false === audio.paused);
    }

    toggle (nextAudio) {
        const currentAudio = this.getCurrentAudio();

        if (currentAudio && currentAudio !== nextAudio) {
            currentAudio.pause();
            nextAudio.play();
        }

        nextAudio.paused ? nextAudio.play() : nextAudio.pause();
    }

    render () {
        if (this.state.songs) {
            return (
                <div className='song-list'>
                    { this.state.songs }
                </div>
            )
        } else {
            return (
                <div className='song-list'></div>
            )
        }
    }
}


export default AudioList;

I am using this code from a previous solution that I found on Stackoverflow ( https://stackoverflow.com/a/50595639 ). I was able to implement this solution to solve my own challenge of needing to have multiple audio sources with one audio player and multiple buttons. However, I am now faced with a new challenge - I want a specific button's text to change when an event is fired up.

I was thinking about implementing state that contains the text for the button that changes when an event fires up, but that wont work because every button will be reading off of the same variable in state and re-rendering, I only want one button to re-render.

I was also thinking about having multiple variables in state that control each specific button, but given that my modified implementation has an dynamic number of audio sources, I don't know the number of state variables I will need.

Does anyone have any suggestions?

Answer 1

Thomas from my secondary thread was kind enough to re-factor my code and essentially re-write parts of it to fix this issue.

You can read his solution here: https://stackoverflow.com/a/62769376/8888293