Q: How to auto generate sound code if data increases I have person data that contain dynamic boolean value. The value is generated automatically and can be true or false every time.
Webpage get the data every 5 seconds and render it. If the value on each person is false then the sound is played.
I have problem if the data increases, i must add manually code to render and play a sound.
This is the code:
import React, { Component } from 'react';
import { render } from 'react-dom';
import Sound from './Mp3';

const data = [
  {
    id: '1',
    name: 'peter',
    value: true
  },
  {
    id: '2',
    name: 'john',
    value: false
  }
];

class App extends Component {
  state = {
    results: [],
    playSoundPeter: false,
    playSoundJohn: false
  }

  componentDidMount() {
    this.getData()
    // get data every 5 sec
    setInterval(this.getData, 5000);
  }

  getData = () => {
    // generate random value
    data[0].value = Math.random() >= 0.5;
    data[1].value = Math.random() >= 0.5;

    // set results state to data
    this.setState({ results: data });

    // extract array results
    for (let i = 0; i < this.state.results.length; i++) {
      // set playSoundPeter state to true if
      // data value equal to false & vice versa
      if (this.state.results[0].value === false) {
        this.setState({ playSoundPeter: true });
      } else {
        this.setState({ playSoundPeter: false });
      }

      // set playSoundJohn state to true if
      // data value equal to false & vice versa
      if (this.state.results[1].value === false) {
        this.setState({ playSoundJohn: true });
      } else {
        this.setState({ playSoundJohn: false });
      }
    }
  }

  render() {
    const { results, playSoundPeter, playSoundJohn } = this.state;
    return (
      <div>
        {results.map(item => {
          return (
            <div key={item.id}>
              <div>
                Name: {item.name}
              </div>
              <div>
                Value: {item.value.toString()}
              </div>
              <br />
            </div>
          )
        })}
        <div>
          Peter sound: {(playSoundPeter) ? 'true' : 'false'}
        </div>
        <div>
          John sound: {(playSoundJohn) ? 'true' : 'false'}
        </div>
        {(playSoundPeter) ? <audio src={Sound} autoPlay /> : ''}
        {(playSoundJohn) ? <audio src={Sound} autoPlay /> : ''}
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

This is the demo
At code above if data increases or decreases i must manually add or remove :


*

*playSound state

*conditional statement & setState

*div true or false value

*audio sound
How to auto generate sound code if data increases?
Solved Updated demo

A: *

*Don't use <audio ...> tags here; use new Audio() instead

*Sound isn't concern of render, but the concern of getData instead
class App extends Component {
  state = {
    results: [],
  }

  componentDidMount() {
    this.getData()
    // get data every 5 sec
    setInterval(this.getData, 5000);
  }

  getData = () => {
    // generate random value
    data[0].value = Math.random() >= 0.5;
    data[1].value = Math.random() >= 0.5;

    // set results state to data
    this.setState({ results: data });  

    // your condition here. If John or Peter value is false
    if (data.some(d => d.false)) {
      var audio = new Audio('audio_file.mp3');
      audio.play();
    }
  }



*A hint. Assign timer ID to some variable and destroy it in componentWillUnmount
