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

Question

I'm new to React and I'm puzzled on something kind of basic.

I need to append a component to the DOM after the DOM is rendered, on a click event.

My initial attempt is as follows, and it doesn't work. But it's the best thing I've thought to try. (Apologies in advance for mixing jQuery with React.)

    ParentComponent = class ParentComponent extends React.Component {
      constructor () {
        this.addChild = this.addChild.bind(this);
      }

      addChild (event) {
        event.preventDefault();
        $("#children-pane").append(<ChildComponent/>);
      }

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

Hopefully it's clear what I need to do, and I hope you can help me attain an appropriate solution.

Alex McMillan · Accepted Answer · 2017-11-11 21:44:00Z

137

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>;

edited Nov 11, 2017 at 21:44

answered Mar 10, 2016 at 1:55

Alex McMillan

18.1k13 gold badges63 silver badges91 bronze badges

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

7 Comments

ewindsor Over a year ago

Great answer! I'd only add add the .bind(this) to this.onAddChild to ensure it can call this.setState.

jayqui Over a year ago

This worked for me (with @ewindsor 's addendum)! Awesome solution.

jayqui Over a year ago

One thing I learned is that children is a react keyword. That is, I renamed the children const defined inside of AppComponent, but, regardless, I still needed to call {this.props.children} inside ParentComponent.

Alex McMillan Over a year ago

@ewindsor oops! I typed that up pretty quickly lol thanks for that - fixed

Alex McMillan Over a year ago

@jayqui yes - I could have made that clearer. You can rename the const all you want, but if you pass them like you would put a <span> inside a <p>, then they are accessed via this.props.children. If you pass them like you would an href attribute to an <a> tag, then you access them via this.props.[attribute name].

|

Hom Bahrani · Accepted Answer · 2017-11-25 01:03:38Z

22

As @Alex McMillan mentioned, use state to dictate what should be rendered in the dom.

In the example below I have an input field and I want to add a second one when the user clicks the button, the onClick event handler calls handleAddSecondInput( ) which changes inputLinkClicked to true. I am using a ternary operator to check for the truthy state, which renders the second input field

class HealthConditions extends React.Component {
  constructor(props) {
    super(props);


    this.state = {
      inputLinkClicked: false
    }
  }

  handleAddSecondInput() {
    this.setState({
      inputLinkClicked: true
    })
  }


  render() {
    return(
      <main id="wrapper" className="" data-reset-cookie-tab>
        <div id="content" role="main">
          <div className="inner-block">

            <H1Heading title="Tell us about any disabilities, illnesses or ongoing conditions"/>

            <InputField label="Name of condition"
              InputType="text"
              InputId="id-condition"
              InputName="condition"
            />

            {
              this.state.inputLinkClicked?

              <InputField label=""
                InputType="text"
                InputId="id-condition2"
                InputName="condition2"
              />

              :

              <div></div>
            }

            <button
              type="button"
              className="make-button-link"
              data-add-button=""
              href="#"
              onClick={this.handleAddSecondInput}
            >
              Add a condition
            </button>

            <FormButton buttonLabel="Next"
              handleSubmit={this.handleSubmit}
              linkto={
                this.state.illnessOrDisability === 'true' ?
                "/404"
                :
                "/add-your-details"
              }
            />

            <BackLink backLink="/add-your-details" />

          </div>
         </div>
      </main>
    );
  }
}

answered Nov 25, 2017 at 1:03

Hom Bahrani

3,6921 gold badge32 silver badges26 bronze badges

3 Comments

kabrice Over a year ago

What if I want to add hundred of InputField through clicking?

younes khanbaba Over a year ago

@kabrice keep a list in state and then map on that list and show that hundred inputfields

Dipanshu Mahla Over a year ago

@youneskhanbaba but doesn't that affect apps performance when react rerender all of those components when another component is added?

Collectives™ on Stack Overflow

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

2 Answers 2

7 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related