How to assign properties dynamically in React?

Question

Here is a function that has two parameters:

The name of the tag that I want to create
An object that has the properties

Using React, I create a component and render that element to DOM. The problem is that I want to add properties to the element, but it does not allow the loop to set properties within element.

var Element = function(element, properties) {
  var newElement = React.createClass({
    render: function() {
      return (
        React.createElement(element, {}, 'react reuseable')
      );
    }
  });

  ReactDOM.render(React.createElement(newElement, null), document.getElementById('content'));
}

Here is the function call to create a React element:

Element('g', {
  id: 'DrawingController.drawingPathCounter ' + '_shape',
  d: 'path',
  fill: 'none',
  stroke: 'Controllers.TemplateController.wireFrameColour_Selected',
  'stroke-width': 1,
  'class': 'drawingpath',
  pathhover: '',
  'vector-effect': 'non-scaling-stroke'
})

Dan Prince · Accepted Answer · 2015-11-29 13:53:19Z

3

You're re-implementing the existing React.createElement method.

You can just store the unique props for your components in an array, then create a list of components using those props.

var propsList = [
  { id: 1, d: 'path', fill: 'none' }, 
  { id: 2, d: 'path', fill: 'none' }, 
  { id: 3, d: 'path', fill: 'none' } 
];

var components = propsList.map(function(props) {
  return React.createElement('g', props);
});

var App = React.createClass({
  render: function() {
    return React.createElement('div', null, components);
  }
});

ReactDOM.render(
  React.createElement(App, null),
  document.getElementById('content')
);

If you want the properties list to be dynamic, then you should store it inside your component's state.

var App = React.createClass({
  getInitialState: function() {
    return {
      propsList: []
    };
  },
  addProps: function(props) {
    var propsList = this.state.propsList.concat([props]);
    this.setState({ propsList: propsList });
  },
  render: function() {
    var components = this.state.propsList.map(function(props) {
      return React.createElement('g', props);
    });

    return React.createElement('div', null, components);
  }
});

edited Nov 29, 2015 at 13:53

answered Nov 29, 2015 at 11:26

Dan Prince

30.1k15 gold badges93 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Muhammad Asif Javed Over a year ago

i want to make different component with different properties so i this is not satisfies my need i want some modification

Dan Prince Over a year ago

The second argument to React.createElement is a properties object, just pass a different properties object in each time you want to make a component with different properties.

Muhammad Asif Javed Over a year ago

will you please do a favor by guide me how i do in this case

Muhammad Asif Javed Over a year ago

this is the code duplication method we are writing the same code again and again just changing the props and this eleminate the concept of modularity. we want to make code modular

Dan Prince Over a year ago

But that is the minimum amount of code that it's possible to write. To instantiate a component, the essential bits of data are the name of the component and the props it takes. This is the form that JSX compiles to.

|

Collectives™ on Stack Overflow

How to assign properties dynamically in React?

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related