I am creating a lot of elements dynamically. I have an array in state which keeps record of the elements. As I add more elements they concat with previous array elements. Here is the code.

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 ponents = this.state.propsList.map(function(props) {
      return React.createElement('g', props);
        });
    return React.createElement('div', null, ponents);
      }
  });
  ReactDOM.render(
      React.createElement(App, null),
      document.getElementById('svg')
    );

I want to remove an element(g tag) on which click action is performed. I have tried to use refs but it didn't worked as array is storing too many elements.

I am creating a lot of elements dynamically. I have an array in state which keeps record of the elements. As I add more elements they concat with previous array elements. Here is the code.

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 ponents = this.state.propsList.map(function(props) {
      return React.createElement('g', props);
        });
    return React.createElement('div', null, ponents);
      }
  });
  ReactDOM.render(
      React.createElement(App, null),
      document.getElementById('svg')
    );

I want to remove an element(g tag) on which click action is performed. I have tried to use refs but it didn't worked as array is storing too many elements.

• javascript
• reactjs

Share Improve this question Follow asked Dec 2, 2015 at 9:18 AwaisAwais 34133 silver badges1111 bronze badges 2

• Check this out if this may help jsfiddle/fooey/t37Lk6p4 – choz Commented Dec 2, 2015 at 9:21
• outside of this ponent i can call addProps() to pass an array of props. – Awais Commented Dec 2, 2015 at 9:24

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Note this is what you'd do if the "user actions" are occurring outside of your React ponents (i.e. elsewhere in the app). If the "user actions" occur as events within your React ponents, you'd only ever call render once, and instead the App would hold the nodes as state and would just call this.setState({ node: modifiedNodes }); to change the state, which would cause React to update your DOM.

var App = React.createClass({
  render: function() {
    // Get the node from the passed-in props
    var node = this.props.node;

    // generate the child ponents
    var ponents = node.map(function(props) {
      return React.createElement('g', {
          id: props.id,
          key: props.id
        },
        React.createElement('path', props));
    });

    // render them in a div
    return React.createElement('div', null, ponents);
  }
});


// first time it will create the DOM
// after that it just modifies the DOM
function renderApp(node, element) {
  ReactDOM.render(React.createElement(App, {
    node: node
  }), element);
}

// Call when you want to get rid of the App pletely
// and cleanup memory without reloading the page
function destroyApp(element) {
  ReactDOM.unmountComponentAtNode(element);
}

// Initial render
var node = Interfaces.Embroidery.node;
renderApp(node, document.getElementById('parentDrawingNode'));

function updateNodeOnSomeUserActionThatHappensOutsideOfReact(...) {
  node.push(...); // or whatever modification you want

  // re-render
  renderApp(node, document.getElementById('parentDrawingNode'));
}

I did it based on the answer of Muhammad . Here is my code.

   var Counter = React.createClass({
  incrementCount(){
    this.setState({
      count: this.state.count + 1,
      count2:this.state.count2 -1

    });
    this.classCss = "asdfadsf";
  },
  getInitialState(){
     return {
       count: 0,
       count2:8999
     }
  },

 tick(classNameReact) {
  //<HelloWorld date={new Date()} />
  ReactDOM.render(
    React.createElement(classNameReact,{date:new Date()}),
    document.getElementById('mount-point2')
  );
},




  render: function(){
    this.classCss ="lala";
    return (
      <div className={this.classCss}>
        <h1>Count: {this.state.count}</h1>
         <h1>Count2: {this.state.count2}</h1>
        <button type="button" onClick={this.incrementCount}>Increment</button>
         <button type="button" onClick={()=>this.tick(HelloWorld)}>TICK</button>
         <button type="button" onClick={()=>this.tick(Counter)}>TICK</button>
         <div id="mount-point2"></div>
      </div>


    );
  }
});


 class HelloWorld extends React.Component {
  render() {
    return (
      <p>
        Hello, <input type="text" placeholder="Your name here" />!
        It is {this.props.date.toTimeString()}
      </p>
    );
  }
}