React access object with prop from parent (Drum Machine)

JavaScript
1

I’ve been working on this for DAYS! I actually did a perfectly fine version in js with a bit of bootstrap and jquery. But I thought I should do it using React. Arghh.
Twice I’ve gotten both the mouse click and key down sounds working but I always get stopped trying to display the name. I’ve thrown everything out and started over twice.
I’ve got all the data in a constant which is an object “drumData”. Each button is a child component called ButtonDr.
Right now all I want to do is console.log any thing from the drumData constant using a prop from the parent. I’ve stripped away everything else for now. If I could make this work everything else will fall into place!
This is where I’m frustrated:

    var drumTxt = this.props.typeDrum
    console.log(drumData.ride.src); // "ride" hardcoded to show that I can access drumData object
    console.log(drumTxt)    // Works. 
    console.log(typeof drumTxt) //it's a string
    console.log(drumData.drumTxt.src);    // so why doesn't it work?
  }

All the code so far: 

const drumData = {
    openhat: {
      name: "Open Hihat",
      id: "Q",
      src: "sounds/openhat.wav"
    },
    tink: {
      name: "Tink",
      id: "W",
      src: "sounds/tink.wav"
    },
    ride: {
      name: "Ride Cymbal",
      id: "E",
      src: "sounds/ride.wav"
    }
}
class ButtonDr extends React.Component
{
constructor(props) {
  super(props);
  this.state = {
    drumName: '',
       };
  this.bang = this.bang.bind(this);
  }
  bang() {
    var drumTxt = this.props.typeDrum
    console.log(drumData.ride.src); // "ride" hardcoded to show that I can access drumData object
    console.log(drumTxt)    // Works. 
    console.log(typeof drumTxt) //it's a string
    console.log(drumData.drumTxt.src);    // so why doesn't it work?
  }
  
  render() {
    return (
    <button className={"drum-pad"} id={this.props.id} onMouseDown={this.bang}>{this.props.id}
      </button>
    );

  }
}
class App extends React.Component
{
constructor(props) {
  super(props);
	}
 
render() {
 return (
   <div id="drum-machine">
        <div id="drum-rows">
            <div id="a-row" className="row" >
                <ButtonDr typeDrum={"openhat"} onClick={this.bang} />
                <ButtonDr typeDrum={"tink"} onClick={this.bang} />
                <ButtonDr typeDrum={"ride"} onClick={this.bang} />
            </div>
        </div>
    </div>
 );
}
}

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

Hey ,

Answering the question in your editor comments: you cannot use variables for object props with dot notation, only with bracket notation.

3

OMG! Thank you!
I found that only this combination works:

console.log(drumData[drumTxt].src);

Thanks again