I have 4 span with onClick={this.clickhandler}. Inside the clickhandler there is an audio which i'd like to play when clicked. The problem is, i want 4 different audio-urls inside the same clickhandler. How can i associate each span with an audio-string and pass it to the same eventhandler?

clickhander(e) {
    const audio = new Audio('.mp3');
    audio.play()
    console.dir(e.target)
}
render() {
    return(
        <div className="container">
            <h1 className="header">Simon Game</h1>
            <span  onClick={this.clickhander}>    
                <Heart fill="#555"/>
            </span>
            <span onClick={this.clickhander}>
                <Heart fill="#402" />
            </span>
            <span onClick={this.clickhander}>
                <Heart fill="#f39" />
            </span>
            <span onClick={this.clickhander}>
                <Heart fill="#29f" />
            </span>
        </div>
    )
}

I have 4 span with onClick={this.clickhandler}. Inside the clickhandler there is an audio which i'd like to play when clicked. The problem is, i want 4 different audio-urls inside the same clickhandler. How can i associate each span with an audio-string and pass it to the same eventhandler?

clickhander(e) {
    const audio = new Audio('https://s3.amazonaws./freecodecamp/simonSound1.mp3');
    audio.play()
    console.dir(e.target)
}
render() {
    return(
        <div className="container">
            <h1 className="header">Simon Game</h1>
            <span  onClick={this.clickhander}>    
                <Heart fill="#555"/>
            </span>
            <span onClick={this.clickhander}>
                <Heart fill="#402" />
            </span>
            <span onClick={this.clickhander}>
                <Heart fill="#f39" />
            </span>
            <span onClick={this.clickhander}>
                <Heart fill="#29f" />
            </span>
        </div>
    )
}

EDIT: i tried the solutions below but i get this error: The error you provided does not contain a stack trace.

this is my code now:

class Home extends Component {

    constructor(props){
        super(props)
    }
    clickhander(e, url) {
        const str = url
        const audio = new Audio(String(str));
        audio.play()
        
    }
    render() {
        return(
            <div className="container">
                <h1 className="header">Simon Game</h1>
                <span  onClick={this.clickhander.bind(this, "https://s3.amazonaws./freecodecamp/simonSound1.mp3")}>    
                    <Heart fill="#555"/>
                </span>
                <span onClick={this.clickhander}>
                    <Heart fill="#402" />
                </span>
                <span onClick={this.clickhander}>
                    <Heart fill="#f39" />
                </span>
                <span onClick={this.clickhander}>
                    <Heart fill="#29f" />
                </span>
            </div>
        )
    }
}

export default Home

• javascript
• reactjs

3 Answers 3

In React, try to think ponent-like.

app.js

class App extends Component {

  audioArr = ['link1', 'link2', 'link3']; // links to songs

  render() {
    return (
      <div className="App">
        {this.audioArr.map((link, i) => (
          <Player link={link} key={i} />
        ))}
      </div>
    )
  }
}

Player.js

class Player extends Component {

  handleClick = () => {
    const audio = new Audio(this.props.link);
    audio.play();
  };

  render() {
    return (
      <div>
        <span onClick={this.handleClick}>
          <Heart fill="#29f" />
        </span>
      </div>
    );
  }
}

You can pass it as a second parameter to your handler:

clickhander(e, url) {
    const audio = new Audio(url);
    audio.play()
    console.dir(e.target)
}
render() {
    return(
        <div className="container">
            <h1 className="header">Simon Game</h1>
            <span  onClick={(e) => this.clickhander(e, "url1")}>    
                <Heart fill="#555"/>
            </span>
            <span onClick={(e) => this.clickhander(e, "url2")}>
                <Heart fill="#402" />
            </span>
            <span onClick={(e) => this.clickhander(e, "url3")}>
                <Heart fill="#f39" />
            </span>
            <span onClick={(e) => this.clickhander(e, "url4")}>
                <Heart fill="#29f" />
            </span>
        </div>
    )
}

You can use bind() to attach to the handler what you want

    clickhander(val, e) {
        console.log("value passed " + val)
    }
    render() {
        return(
            <div className="container">
                <h1 className="header">Simon Game</h1>
                <span  onClick={this.clickhander.bind(this, "val1")}>    
                    <Heart fill="#555"/>
                </span>
                <span onClick={this.clickhander.bind(this, "val2")}>
                    <Heart fill="#402" />
                </span>
                <span onClick={this.clickhander.bind(this, "val3")}>
                    <Heart fill="#f39" />
                </span>
                <span onClick={this.clickhander.bind(this, "val4")}>
                    <Heart fill="#29f" />
                </span>
            </div>
        )
    }