Dynamic attribute in ReactJS

by

The cleanest way to add optional attributes (including disabled and others you might want to use) is currently to use JSX spread attributes:

var Hello = React.createClass({
    render: function() {
        var opts = {};
        if (this.props.disabled) {
            opts['disabled'] = 'disabled';
        }
        return <button {...opts}>Hello {this.props.name}</button>;
    }
});

React.render((<div><Hello name="Disabled" disabled='true' />
    <Hello name="Enabled"  />
</div>)
, document.getElementById('container'));

By using spread attributes, you can dynamically add (or override) whatever attributes you’d like by using a javascript object instance. In my example above, the code creates a disabled key (with a disabled value in this case) when the disabled property is passed to the Hello component instance.

If you only want to use disabled though, this answer works well.

More Related Contents:

  1. We simply cannot write “ in ReactJS?
  2. Dynamic tag name in React JSX
  3. What are React controlled components and uncontrolled components?
  4. Clear and reset form input fields
  5. How to resolve “Cannot use import statement outside a module” in jest
  6. Hide keyboard in react-native
  7. When giving unique keys to components, is it okay to use Math.random() for generating those keys?
  8. How to import and export components using React + ES6 + webpack?
  9. How to combine multiple inline style objects?
  10. Redux: Why is avoiding mutations such a fundamental part of using it?
  11. React Router not working with Github Pages
  12. React.useState does not reload state from props
  13. TypeError: evt.target is null in functional setState
  14. Default property value in React component using TypeScript
  15. Can getDerivedStateFromProps be used as an alternative to componentWillReceiveProps
  16. React Router 4 Nested Routes not rendering
  17. React passing parameter via onclick event using ES6 syntax
  18. React fetch data in server before render
  19. React router 4 does not update view on link, but does on refresh
  20. ReactJS difference between stateful and stateless
  21. Why useEffect doesn’t run on window.location.pathname changes?
  22. Call child component method from parent in react
  23. How to generate unique IDs for form labels in React?
  24. What is the expected return of `useEffect` used for?
  25. how to async/await redux-thunk actions?
  26. react native post form data with object and file in it using axios
  27. React – Is useState ‘s setter function able to change?
  28. Next Image not taking class properties
  29. Is it possible to return empty in react render function?
  30. How to remove the hash from the url in react-router

Leave a Comment