How do I pass in a component in a dialogue box (material-ui), using React?

Question

Hi I am trying to display a chart component inside of a dialogue box. I am confused why the chart is not rendering inside of the dialogue box. It's a lot of code, so I can't do sandbox, but am struggling to find any documentation to see how a component should be referenced inside of the dialogue box, so just narrowing down the problem. For more background if interested, the same chart is rendering on the page when I click the button that opens the dialogue box, but I would like the chart to appear in the dialogue box as well. The component is called ResultCharts. It is being imported/exported correctly. I am fairly new to React. Thanks!

<Dialog open={this.state.openResult} onClose={this.handleClose} aria-labelledby="form-dialog-title">
     <DialogTitle onClose={this.handleClose} id="form-dialog-title">Results</DialogTitle>
     <DialogContent>                        
             <ResultCharts
                  results={ results }
             />
     </DialogContent>
     <DialogActions>
          <Button onClick={this.handleClose} color="primary">
               Cancel
          </Button>
     </DialogActions>
</Dialog>

Edited to add: For reference, this is the code for the button that opens the dialog box. The method in onClick does the algorithm for displaying the chart results (which is being correctly done on the page, just can't get the chart to display inside the dialogue box). Much thanks again!

<Button variant="contained" className={classes.button} onClick={this.showResults}>
    Click me!
</Button>

Answer 1

It's hard to say exactly but I would try a few things:

1. Inspect the page and hover over the dialog to see if div for the chart is there.
2. Use the React debugging extension to see if the ResultChart component is being render.
3. Is the results prop to ResultChart null or undefined ? If that makes up the main body of that component it could be rendering with no content.