React.js: How to append a component on click?

by

Don’t use jQuery to manipulate the DOM when you’re using React. React components should render a representation of what they should look like given a certain state; what DOM that translates to is taken care of by React itself.

What you want to do is store the “state which determines what gets rendered” higher up the chain, and pass it down. If you are rendering n children, that state should be “owned” by whatever contains your component. eg:

class AppComponent extends React.Component {
  state = {
    numChildren: 0
  }

  render () {
    const children = [];

    for (var i = 0; i < this.state.numChildren; i += 1) {
      children.push(<ChildComponent key={i} number={i} />);
    };

    return (
      <ParentComponent addChild={this.onAddChild}>
        {children}
      </ParentComponent>
    );
  }

  onAddChild = () => {
    this.setState({
      numChildren: this.state.numChildren + 1
    });
  }
}

const ParentComponent = props => (
  <div className="card calculator">
    <p><a href="#" onClick={props.addChild}>Add Another Child Component</a></p>
    <div id="children-pane">
      {props.children}
    </div>
  </div>
);

const ChildComponent = props => <div>{"I am child " + props.number}</div>;

More Related Contents:

  1. Detect click outside React component
  2. Invariant Violation: _registerComponent(…): Target container is not a DOM element
  3. React.js: onChange event for contentEditable
  4. How to access component methods from “outside” in ReactJS?
  5. How do you set the document title in React?
  6. Why is React’s concept of Virtual DOM said to be more performant than dirty model checking?
  7. React Error: Target Container is not a DOM Element
  8. React, losing saved data in localStorage with useEffect after page refresh
  9. Retrieving value from with multiple option in React
  10. “SyntaxError: Unexpected token < in JSON at position 0"
  11. ReactJS – Does render get called any time “setState” is called?
  12. How to show Page Loading div until the page has finished loading?
  13. React onClick function fires on render
  14. React Js conditionally applying class attributes
  15. How to check in Javascript if one element is contained within another
  16. Violation Long running JavaScript task took xx ms
  17. How to access a child’s state in React
  18. Get element at specified position – JavaScript
  19. Is there any way to update a specific index from the array in Firestore
  20. Is there a synchronous alternative of setState() in Reactjs
  21. How to iterate through all attributes in an HTML element?
  22. Detecting if a browser is in full screen mode
  23. ES6 array map doesn’t return anything: ReactJS
  24. Why React Hook useState uses const and not let
  25. When is it appropriate to use a constructor in REACT?
  26. How target DOM with react useRef in map
  27. Is there ‘element rendered’ event?
  28. How to properly use useHistory () from react-router-dom?
  29. React Error: “SharedArrayBuffer is not defined” in Firefox
  30. How to set iframe content of a react component

Leave a Comment