title: Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>
body: <p>I know the what the problem is. But I can't find out a solution. a paragraph cannot contain any other tags. But in my case ,I didn't use any paragraph tags.</p>
  
  <pre><code>return (
    &lt;div className={classes.root}&gt;
      &lt;Stepper activeStep={activeStep} alternativeLabel&gt;
        {steps.map(label =&gt; {
          return (
            &lt;Step key={label}&gt;
              &lt;StepLabel&gt;{label}&lt;/StepLabel&gt;
            &lt;/Step&gt;
          );
        })}
      &lt;/Stepper&gt;
      &lt;div&gt;
        {this.state.activeStep === steps.length ? (
          &lt;div&gt;
            &lt;div&gt;All steps completed&lt;/div&gt;
            &lt;Button onClick={this.handleReset}&gt;Reset&lt;/Button&gt;
          &lt;/div&gt;
        ) : (
          &lt;div&gt;
            &lt;div&gt;{getStepContent(activeStep)}&lt;/div&gt;
            &lt;div&gt;
              &lt;Button
                disabled={activeStep === 0}
                onClick={this.handleBack}
                className={classes.backButton}
              &gt;
                Back
              &lt;/Button&gt;
              &lt;Button variant="contained" color="primary" onClick={this.handleNext}&gt;
                {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
              &lt;/Button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        )}
      &lt;/div&gt;
    &lt;/div&gt;
  );
  </code></pre>
  
  <p>}
  }</p>
  
  <p>My getStep method .. it looks like returning a paragraph. But it should return a component of react.. </p>
  
  <pre><code>    function getStepContent(stepIndex) {
    switch (stepIndex) {
      case 0:
        return &lt;FormPart1 setFormPart1Value={getValueFormPart1.bind(this)} className={{
            alignContent:'center'
        }
        } /&gt;;
      case 1:
        return &lt;FormPart2 /&gt;;
      case 2:
        return &lt;PerformanceTable /&gt;;
      case 3:
          return &lt;WorkHabitTable /&gt;;
      case 4:
          return &lt;OtherDetails /&gt;;
      case 5:
          return &lt;PerformanceOverall /&gt;;
      default:
        return 'Uknown stepIndex';
    }
  </code></pre>
  
  <p>This code is taken from Material-UI directly. So anyone suggests me a solution to get rid of the wrong appearing in the browser.</p>