CODEWITHSUNDEEP
javascriptreactjs
Pruthvi
Pruthvi

Reputation: 89

Display the button info in Parent Component React

I have a react class wherein there is a div with id="display". I need this div to display the name associated with the particular button when that button is clicked.

Heres my code:

import React from "react";
import ReactDom from "react-dom";

    const sounds = [
      {
        idnum: "1",
        id: "Q",
        src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3",
        name: "Hello",
      },
      {
        idnum: "2",
        id: "W",
        src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3",
        name: "Hello",
      },
      {
        idnum: "3",
        id: "E",
        src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3",
    name: "Hello",
  },
  {
    idnum: "4",
    id: "A",
    src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3",
    name: "Hello",
  },
  {
    idnum: "5",
    id: "S",
    src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3",
    name: "Hello",
  },
  {
    idnum: "6",
    id: "D",
    src: "https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3",
    name: "Hello",
  },
  {
    idnum: "7",
    id: "Z",
    src: "https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3",
    name: "Hello",
  },
  {
    idnum: "8",
    id: "X",
    src: "https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3",
    name: "Hello",
  },
  {
    idnum: "9",
    id: "C",
    src: "https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3",
    name: "Hello",
  },
];

var dispName = "NONE";

class SoundButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      audioSource: "not clicked",
    };
    this.soundOn = this.soundOn.bind(this);
  }

  buttonRef = React.createRef();
  audioRef = React.createRef();

  componentDidMount() {
    document.addEventListener("keypress", this.buttonPress);
  }

  buttonPress(e) {
    var a = e.key.toUpperCase();
    if (
      a == "Q" ||
      a == "W" ||
      a == "E" ||
      a == "A" ||
      a == "S" ||
      a == "D" ||
      a == "Z" ||
      a == "X" ||
      a == "C"
    ) {
      console.log(a);
      document.getElementById(a).click();
    }
  }

  soundOn() {
    console.log(this.audioRef.current);
    document.getElementById(this.props.keyTrigger);
    console.log(this.props);
    this.audioRef.current.play();
    this.dispName = "DISPLAY";
  }



  render() {
    const { info } = this.props;

    return (
      <button
        ref={this.buttonRef}
        className="drum-pad"
        id={info["idnum"]}
        onClick={this.soundOn}
      >
        {info["id"]}
        <audio
          ref={this.audioRef}
          src={info.src}
          className="clip"
          id={info.id}
          type="audio/mp3"
        ></audio>
      </button>
    );
  }
}

class Button extends React.Component {
  // any other logic
  constructor() {
    super();
  }

  render() {
    const buttonList = sounds.map((info) => (
      <SoundButton info={info} key={info.id} />
    ));
    return (
      <div id="display">
        {dispName}
        <div>{buttonList}</div>
      </div>
    );
  }
}
export default Button;

So here, I have my const dispName which should get updated to the button name when clicked. The name of the button is stored in sounds.name.

Kindly help me here.

Thanks!

Upvotes: 0

Views: 884

Answers (1)

rzwnahmd
rzwnahmd

Reputation: 1082

You need to manage the a state variable in Button component and then pass a callback to SoundButton component that will be called with the button name when the button is clicked. Here's a link to working example: https://codesandbox.io/s/react-filepond-live-demo-7v3v9?file=/src/index.js

Hope it solves you problem :)

Upvotes: 1

Related Questions