title: Reduce duplicate codes on switch case on React prop value improve code resuability
body: <p>this is multistep form and, on the programme, passing parent property to level 2 child component and I feel that on the switch case the button component has duplicate props. Can anyone help me rewrite this code without duplicating as below code. Any react method I can use to prevent this issue? Did anyone can help me out on this issue. As I'm still beginner on react js.</p>
  <pre><code>  onHandleBtnClick={onHandleBtnClick}
    nextStep={nextStep}
    nextProgress={nextProgress}
    cElement={cElement}
  </code></pre>
  <pre><code>class Register extends Component {
      constructor(props) {
          super(props);
          this.state = {
              currentElement: [
                  {
                      progress: 10,
                      step: 1,
                      type: null
                  }
              ],
          };
      }
  
      onHandleClick = nextselection =&gt;{
  //some logic goes here
      }
  
      render() {
          const {currentElement, userSignUp, handleSignUp, clientInfo} = this.state;
          return (
                   &lt;div className=&quot;container-fluid&quot;&gt;
                      &lt;div className=&quot;row mx-0&quot;&gt;
                          {currentElement.map(element =&gt; (
                              &lt;Renderelement
                                  key={element.step}
                                  step={element.step}
                                  progress={element.progress}
                                  curElement={element}
                                  clientObj={clientInfo}
                                  onHandleBtnClick={this.onHandleClick}
                              /&gt;
                          ))}
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          );
      }
  }
  
  
  function Renderelement(props) {
      const { step, progress, curElement, onHandleBtnClick, clientObj } = props;
      let { nextStep, nextProgress, cElement } = nextObject();
  
      if (step == 1) {
          switch (curElement.type) {
              case &quot;individual&quot;:
                  return (
                      &lt;React.Fragment&gt;
                          &lt;div className=&quot;col-md-6 col-sm-12&quot;&gt;
                              &lt;Clientinformation /&gt;
                              &lt;Button
                                  onHandleBtnClick={onHandleBtnClick}
                                  nextStep={nextStep}
                                  nextProgress={nextProgress}
                                  cElement={cElement}
                                  profileType=&quot;individual&quot;
                                  btntext=&quot;Saving &amp; Contiune&quot;
                              /&gt;
                          &lt;/div&gt;
                      &lt;/React.Fragment&gt;
                  );
              case &quot;business&quot;:
                  return (
                      &lt;React.Fragment&gt;
                          &lt;div className=&quot;col-md-6 col-sm-12&quot;&gt;
                              &lt;Clientinformation /&gt;
                              &lt;Button
                                  onHandleBtnClick={onHandleBtnClick}
                                  nextStep={nextStep}
                                  nextProgress={nextProgress}
                                  cElement={cElement}
                                  profileType=&quot;business&quot;
                                  btntext=&quot;Saving &amp; Contiune&quot;
                              /&gt;
                          &lt;/div&gt;
                      &lt;/React.Fragment&gt;
                  );
              default:
                  break;
          }
      } else if (step == 2) {
          switch (curElement.type) {
              case &quot;individual&quot;:
                  return (
                      &lt;React.Fragment&gt;
                          &lt;div className=&quot;col-md-6 col-sm-12&quot;&gt;
                              &lt;Caregiverinfo /&gt;
                              &lt;Button
                                  onHandleBtnClick={onHandleBtnClick}
                                  nextStep={nextStep}
                                  nextProgress={nextProgress}
                                  cElement={cElement}
                                  profileType=&quot;individual&quot;
                                  btntext=&quot;Saving &amp; Contiune&quot;
                              /&gt;
                          &lt;/div&gt;
                      &lt;/React.Fragment&gt;
                  );
              case &quot;business&quot;:
                  return (
                      &lt;React.Fragment&gt;
                          &lt;div className=&quot;col-md-6 col-sm-12&quot;&gt;
                              &lt;Caregiverinfo /&gt;
                              &lt;Button
                                  onHandleBtnClick={onHandleBtnClick}
                                  nextStep={nextStep}
                                  nextProgress={nextProgress}
                                  cElement={cElement}
                                  profileType=&quot;business&quot;
                                  btntext=&quot;Saving &amp; Contiune&quot;
                              /&gt;
                          &lt;/div&gt;
                      &lt;/React.Fragment&gt;
                  );
              default:
                  break;
          }
      } 
  
      function nextObject() {
          let nextStep = step;
          let nextProgress = progress;
          let cElement = curElement;
          nextStep = parseInt(nextStep) + 1;
          nextProgress = parseInt(nextProgress) + 10;
          return { nextStep, nextProgress, cElement };
      }
  }
  
  function Profilebutton(props) {
      return (
          &lt;div className=&quot;col-md-4 offset-md-4 text-center&quot;&gt;
              &lt;div
                  className=&quot;btn btn-primary btn-main btn-lg p-4 mb-4 profileType&quot;
                  onClick={() =&gt; props.onHandleBtnClick(props.nextProgress+&quot;-&quot;+props.nextStep+'-'+props.profileType)}
              &gt;
                  {props.btntext} &lt;i className={&quot;fa-2x fas &quot; + props.btnicon}&gt;&lt;/i&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  class Caregiverinfo extends Component {
  //Caregiver class
  }
  class Clientinformation extends Component {
  //client class
  }
  </code></pre>