CODEWITHSUNDEEP
cssnode.jshtmlreactjsmaterial-ui
Suhail Moh
Suhail Moh

Reputation: 55

Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <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.

return (
  <div className={classes.root}>
    <Stepper activeStep={activeStep} alternativeLabel>
      {steps.map(label => {
        return (
          <Step key={label}>
            <StepLabel>{label}</StepLabel>
          </Step>
        );
      })}
    </Stepper>
    <div>
      {this.state.activeStep === steps.length ? (
        <div>
          <div>All steps completed</div>
          <Button onClick={this.handleReset}>Reset</Button>
        </div>
      ) : (
        <div>
          <div>{getStepContent(activeStep)}</div>
          <div>
            <Button
              disabled={activeStep === 0}
              onClick={this.handleBack}
              className={classes.backButton}
            >
              Back
            </Button>
            <Button variant="contained" color="primary" onClick={this.handleNext}>
              {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
            </Button>
          </div>
        </div>
      )}
    </div>
  </div>
);

} }

My getStep method .. it looks like returning a paragraph. But it should return a component of react.. 

    function getStepContent(stepIndex) {
  switch (stepIndex) {
    case 0:
      return <FormPart1 setFormPart1Value={getValueFormPart1.bind(this)} className={{
          alignContent:'center'
      }
      } />;
    case 1:
      return <FormPart2 />;
    case 2:
      return <PerformanceTable />;
    case 3:
        return <WorkHabitTable />;
    case 4:
        return <OtherDetails />;
    case 5:
        return <PerformanceOverall />;
    default:
      return 'Uknown stepIndex';
  }

This code is taken from Material-UI directly. So anyone suggests me a solution to get rid of the wrong appearing in the browser.

Upvotes: 3

Views: 18702

Answers (2)

Martyna W&#243;jcik
Martyna W&#243;jcik

Reputation: 11

You can always wrap your Material-UI Button in <ButtonGroup>.

It helped in my case.

<ButtonGroup
  orientation="vertical"
  color="primary"
  aria-label="vertical outlined primary button group"
>
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

The warning message states that you cannot use div tag inside the p tag like:

<p>
 <div>some text</div>
</p>

This is invalid html. The p tag can contain inline elements not block level elements.

So, one of your component is using such. You need to fix that. (Simply replace p tag with div tag)

Or, the library itself might have used such? You may fix by your own or wait for the fixes by submitting an issue.

Upvotes: 4

Related Questions