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 initia

Answer 1

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(
      

        

          


            

            

            {
              this.state.inputLinkClicked?

              

              :

              

            }

            
              Add a condition
            

            

            

          
         
      
    );
  }
}