score:10
Accepted answer
you could use an object to store the dynamic properties and then use jsx spread attributes.
https://facebook.github.io/react/docs/jsx-spread.html
const propbag = { [`data-${foo}`] = 'bar' };
return (
<div {...propbag}>
{this.props.children}
</div>
);
that is using the computed properties feature of es6 as well as template literal strings. if you are not using es6 features you could do an es5 implementation like so:
var propbag = {};
propbag['data-' + foo] = 'bar';
return (
<div {...propbag}>
{this.props.children}
</div>
);
Source: stackoverflow.com
Related Query
- Dynamically set attribute key (e.g. data-{foo}="bar") in React
- Dynamically set defaultChecked with value of setState within data map with react hooks
- Set React Material UI Checkbox data attribute
- React - use setField pattern with a dynamically set key
- Set data attribute using string in react
- React - Dynamically set state without hardcoding key field
- Using immutability-helper in React to set variable object key
- Set the data in React Context from asynchronous API call
- How to set HTML lang attribute dynamically on NextJs Document?
- Optional attribute set with React JSX
- React JSX: How to set props to placeholder attribute
- React TypeScript get Data Attribute From Click Event
- Set dynamic key in state via useState React hooks
- Set Material UI react TableCell width dynamically
- React how to dynamically set div height to follow suit of full window height including scroll
- Rendering React components from json data dynamically
- How to add data attribute without value in react create element?
- Dynamically inject data in React Router Routes
- How to set initial tab in react navigation TabNavigator dynamically
- Adding Disabled Attribute to dynamically created Button In React
- How can I set the source of an image dynamically in React native?
- REACT - Set initial data in Formik Form after fetching from API
- Dynamically set GraphQL queries for React components with Apollo Client
- React Native SectionList replace data key
- react native how to filter data with some key object on json
- React set state property dynamically
- Set Prop Key Dynamically JSX
- How do I load inital set of data with ajax call in React redux?
- how to set focus to next input on enter key press in react js with refs
- React pass data attribute to DOM
More Query from same tag
- Why the initial loading state is set to true while using useState?
- Positioning a NavBar in React
- How to calculate lattitude and longitude from x-y coordinates for geotagged images
- How to Show a div near Cursor position on hover in React js?
- How to render a number of image-elements with different src in react
- I am getting an error when using class components in Gatsby
- POST: 400 BAD REQUEST on REACT APP - using Express
- Can't use React context?
- React Native i18n set default language on app load
- Can I use webpack's hot module reloading with sailsjs?
- Return new JS object using previous object values
- How to send axios post with application / x-www-form-urlencoded?
- react router 1@rc1 server side redirect
- How to place an closing button on a tab, using Material UI
- How to use react-i18next <Trans> Component to display array elements?
- React - finding a proper way to use a common component amongst multiple parent components
- How can I set focus on a dynamically added field with React
- JSX render a letter initial button wrapping a set of buttons that starts with the same letter
- Attempted import error: 'formatDate' is not exported from 'src/utils'
- How do I upload a file with fetch method in react?
- How to add more action icons to material UI accordion?
- React-Beautiful-Dnd doesn't rerender after inserting new Draggable
- React component not re-rendering with state update
- How to sort data which mix text and number?
- Error when trying to add timestamps to comment section for social media web app using firebase
- Using the Map Function in a React Component
- Getting error after upgrading eslint version
- How to populate select dropdown elements from API data?
- The initial render of the useEffect is disturbing the values of the cryptos. What is the solution?
- Math Operation with React States