score:1
Accepted answer
correct syntax would be
this.refs[soundname].play()
not sure about react though.
more info : https://www.w3schools.com/js/js_properties.asp
score:0
please note that using string literals as refs is deprecated.
instead, use functional refs:
<audio ref={(el) => this.jammedref = el} src={jammedsound}></audio>
<audio ref={(el) => this.budgeref = el} src={budgesound}></audio>
and the function itself looks like this:
playsound(soundname){
this[`${soundname}ref`].play();
}
Source: stackoverflow.com
Related Query
- Best practices for using React refs to call child function
- Warning with function components cannot be given refs - even though using forwardRef() with Styled Components
- Unable to call child function from parent using refs with functional component
- When Using Redux Saga with React Get This Error .. Uncaught TypeError: getPosts is not a function
- Call child hook function from parent using refs
- How can i hardcode the date in this function using next js
- Getting this error while using React router TypeError: type.toUpperCase is not a function
- undefined this after using bind on module function
- Why is this is undefined when mocking event in React unit testing, using sinon.spy to mock function and enzyme.shallow render for React Component?
- Using function param in this.refs
- React js, pass a function with parameters as props without using this keyword
- refs is depreciated. refs works but is depreciated. How can we make this code work without using refs keyword here
- Pass param when using bind this with constructor in jsx
- When I create a variable to a function using "await", this function runs immediately or just when I call this variable?
- Using arrow functions inside React component does not transfer over parent context (which exists). this remains undefined in arrow function
- How do rewrite this higher order function without using static functions?
- how can I get the csv file object when using this code? I'm trying to add a function to convert a csv file to a json file
- Access child function from parent using refs when the child is a function component and the parent does not return JSX
- React: using refs in a function component
- Can anyone explain why this returns between 50 to 100 of the same values? I am using this to change what a function does at a certain window width
- react using a param as function strict mode typescript error
- Is this the correct way to delete an item using redux?
- _react.default.createContext is not a function when using react-redux
- TypeError dispatcher.useState is not a function when using React Hooks
- Passing function as a param in react-navigation 5
- Error when creating new object from existing one using `...`: In this environment the sources for assign MUST be an object
- Using document.querySelector in React? Should I use refs instead? How?
- React.js - Syntax error: this is a reserved word in render() function
- Destructuring props in the function parameters using TypeScript
- Uncaught TypeError: create is not a function using useEffect React Hook with AJAX request
More Query from same tag
- Problem passing parameters down in React native
- Is it possible to pass setValue in react to child componenet as a function
- What to pass to super when there are no props?
- How to push an object to another in react?
- Updating redux store after component props change
- Issues with text rendering in react component
- How to create undo/redo buttons in Quill JS (react-quill)?
- strip card element input don't display
- react cannot use fileinput twice without refreshing the page
- How to Pass A Custom Interface As Props Into A Functional React Component
- React.js - Autocomplete: How To Hide Suggest Lst While Clicking On Other Areas
- Redux-saga select testing with conditional statement
- @material-ui Autocomplete: set input value programmatically
- Add attributes to a path svg component for a map in React
- How to find all of the style attributes I can edit in ant design component?
- React router differentiate between two parameters
- Obfuscate React classNames in existing codebase
- React, React Router and Flux: “dispatch in the middle of a dispatch” when I try to clear the messages on store
- What is the best way to have variable attributes in JSX?
- How to handle unAuthorized user and redirect it to 403 page in Reactjs
- TypeError: Cannot read property 'root' of undefined
- Choppy parallax in React. What's best practice?
- Element implicitly has an 'any' type because expression of type 'string' can't be used to index type React Typescript
- Highcharts maxWidth or maxHeight of map
- Component's children should not be mutated
- React Higher Order Component (HOC) in typescript
- Integrating Drift chat service within a Gatsby site
- How can I make this work with less code and more efficiently? - Mapping Json and rendering components conditionally
- React/Redux animations based on actions
- How to center content in child elements React