title: React force componentDidMount
body: <p>I have the following:</p>
  
  <pre><code>import React from 'react';
  import axios from 'axios';
  
  class FirstName extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              submitted: false
          };
      }
      getName () {
          var name = this.refs.firstName.value;
          this.setState(function() {
            this.props.action(name);
          });
      }
      handleSubmit (e) {
          e.preventDefault();
          this.setState({ submitted: true }, function() {
              this.props.actionID(2);
              this.props.activeNav('color');
          });
      }
      render () {
          return (
              &lt;div&gt;
                  &lt;h2&gt;tell us your first name&lt;/h2&gt;
                  &lt;form&gt;
                      &lt;input 
                          type="text"
                          ref="firstName"
                          onChange={this.getName.bind(this)}
                      /&gt;
                      &lt;div className="buttons-wrapper"&gt;
                          &lt;button href="#"&gt;back&lt;/button&gt;
                          &lt;button onClick={this.handleSubmit.bind(this)}&gt;continue&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;  
          );
      }
  };
  
  class PickColor extends React.Component {
      backToPrevious (e) {
          e.preventDefault();
          this.props.actionID(1);
          this.props.activeNav('name');
      }
      goToNext (e) {
          e.preventDefault();
          this.props.actionID(3);
          this.props.activeNav('design');
          this.props.displayIconsHolder(true);
      }
      getColorValue(event) {
          this.props.color(event.target.getAttribute("data-color"));
      }
      render () {
          var colors = ['red', 'purple', 'yellow', 'green', 'blue'],
              colorsLink = [];
  
          colors.forEach(el =&gt; { 
              colorsLink.push(&lt;li 
                                  data-color={el} 
                                  key={el} 
                                  onClick={this.getColorValue.bind(this)} 
                                  ref={el}&gt;
                                      {el}
                              &lt;/li&gt;
              );
          });
  
          return (
              &lt;section&gt;
                  &lt;ul&gt;
                      {colorsLink}
                  &lt;/ul&gt;
                  &lt;button onClick={this.backToPrevious.bind(this)}&gt;back&lt;/button&gt;
                  &lt;button onClick={this.goToNext.bind(this)}&gt;continue&lt;/button&gt;
              &lt;/section&gt;
          );
      }
  }
  
  class ConfirmSingleIcon extends React.Component {
      goBack () {
          this.props.goBack();
      }
      confirmCaptionandIcon (event) {
          var optionID = event.target.getAttribute("data-option-id"),
              name = event.target.getAttribute("data-option-name");
          this.props.setOptionID(optionID);
          this.props.setIcon(1, name, optionID, false);
      }
      goNext () {
          this.props.goNext();
      }
      render () {
          console.log(this.props.currentState);
          var options = [],
              that = this;
          this.props.iconOptionsList.forEach(function(el){
              options.push(&lt;li onClick={that.confirmCaptionandIcon.bind(that)} key={el.option} data-option-name={el.option} data-option-id={el.id}&gt;{el.option}&lt;/li&gt;);
          });
          return (
              &lt;div&gt;
                  &lt;h2&gt;Choose your caption&lt;/h2&gt;
                  &lt;h3&gt;
                      {this.props.selectedIcon}
                  &lt;/h3&gt;
                  &lt;ul&gt;
                      {options}
                  &lt;/ul&gt;
                  &lt;button onClick={this.goBack.bind(this)} &gt;back&lt;/button&gt;
                  &lt;button onClick={this.goNext.bind(this)} &gt;confirm&lt;/button&gt;
              &lt;/div&gt;
          );
      }
  }
  
  class ConfirmCaption extends React.Component {
      handleClick () {
          var currentState = this.props.currentState;
          this.props.setIcon(currentState.icon_ID, currentState.selectedIcon, currentState.option_ID, true);
          this.props.setIconVisiblity(true);
          this.props.setIconListVisiblity(false);
      }
      render () {
          console.log(this.props.currentState);
          return (
              &lt;div&gt;
                  &lt;p onClick={this.handleClick.bind(this)}&gt;confirm icon and caption&lt;/p&gt;
              &lt;/div&gt;
          );
      }
  }
  
  class ChooseIcon extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              icons: [],
              iconList: true,
              confirmIcon: false,
              confirmCaption: false,
              selectedIconOptions: '',
              icon_ID: '',
              option_ID: '',
              selectedIcon: ''
          };
          this.setOptionID = this.setOptionID.bind(this);
  
          this.setIconVisiblity = this.setIconVisiblity.bind(this);
          this.setIconListVisiblity = this.setIconListVisiblity.bind(this);
      }
      setOptionID (id) {
          this.setState({ option_ID: id })
      }
      setIconVisiblity (onOff) {
          this.setState({ confirmIcon: onOff })
      }
      setIconListVisiblity (onOff) {
          this.setState({ iconList: onOff })
      }
      componentDidMount() {
          var url = `http://local.tshirt.net/get-options`;
          axios.get(url)
              .then(res =&gt; {
                  this.setState({ icons:res.data.icons });
          });
      }
      handleClick (event) {
          var iconId = event.target.getAttribute("data-icon-id"),
              that = this;
          this.state.icons.forEach(function(el){
              if(el.id == iconId){
                  that.setState(
                      { 
                          confirmIcon: true,
                          iconList: false,
                          selectedIcon: el.name,
                          icon_ID: iconId,
                          selectedIconOptions: el.option
                      }
                  );
              }
          });
      }
      goBack () {
          this.setState(
              { 
                  confirmIcon: false,
                  iconList: true
              }
          );
      }
      goNext () {
          this.setState(
              { 
                  confirmIcon: false,
                  iconList: false,
                  confirmCaption: true
              }
          );
      }
      render () {
          var icons = [];
          this.state.icons.forEach(el =&gt; {
              icons.push(&lt;li data-icon-id={el.id} onClick={this.handleClick.bind(this)} key={el.name}&gt;{el.name}&lt;/li&gt;);
          });
          return (
              &lt;div&gt;
                  {this.state.iconList ? &lt;IconList icons={icons} /&gt; : ''}
                  {this.state.confirmIcon ? &lt;ConfirmSingleIcon goBack={this.goBack.bind(this)} 
                                                               goNext={this.goNext.bind(this)} 
                                                               setIcon={this.props.setIcon} 
                                                               selectedIcon={this.state.selectedIcon}
                                                               iconOptionsList ={this.state.selectedIconOptions}
                                                               setOptionID={this.setOptionID}
                                                               currentState={this.state} /&gt; : ''}
  
                  {this.state.confirmCaption ? &lt;ConfirmCaption currentState={this.state} 
                                                               setIcon={this.props.setIcon}
                                                               setIconVisiblity={this.setIconVisiblity}
                                                               setIconListVisiblity={this.setIconListVisiblity}  /&gt; : ''}
              &lt;/div&gt;
          );
      }
  }
  
  class IconList extends React.Component {
      render () {
          return (
              &lt;div&gt;
                  &lt;h2&gt;Pick your icon&lt;/h2&gt;
                  &lt;ul&gt;
                      {this.props.icons}
                  &lt;/ul&gt;
              &lt;/div&gt;
          );
      }
  }
  
  class Forms extends React.Component {
      render () {
          var form;
          switch(this.props.formID) {
              case 1:
                  form = &lt;FirstName action={this.props.action} actionID={this.props.switchComponent} activeNav={this.props.activeNav} /&gt;
                  break;
              case 2:
                  form = &lt;PickColor displayIconsHolder={this.props.seticonsHolder} color={this.props.colorVal} actionID={this.props.switchComponent} activeNav={this.props.activeNav} /&gt;
                  break;
              case 3:
                  form = &lt;ChooseIcon setIcon={this.props.setOptionA} /&gt;
                  break;
          }
          return (
              &lt;section&gt;
                  {form}
              &lt;/section&gt;
          );
      }
  }
  
  export default Forms;
  </code></pre>
  
  <p>"ChooseIcon" is a component that will get used 3 times therefore everytime I get to it I need to bring its state back as if it was the first time.</p>
  
  <p>Ideally I would need to make this ajax call everytime:</p>
  
  <pre><code>componentDidMount() {
      var url = `http://local.tshirt.net/get-options`;
      axios.get(url)
          .then(res =&gt; {
              this.setState({ icons:res.data.icons });
      });
  }
  </code></pre>
  
  <p>is there a way to manually call componentDidMount perhaps from a parent component?</p>