Refactoring react code - reactjs

Question

I have a class component that is a header-bar and when you click on an icon a dialog-box pop up where you can input data and save it. I am trying to split these two items- header-bar and dialog-box into two different components. Is the best way to do this to redirect the from the header-bar component to a new dialog-box component. At the moment i have both of them in one component.Thanks for the advice.
const{classes} = this.props
return (
<div>
<Dialog
open={this.state.open}
onClose={this.handleClose}
aria-labelledby="form-dialog-title">
<DialogTitle id="form-dialog-title">Add Folder</DialogTitle>
<DialogContent>
<TextField
margin="normal"
onChange={this.handleChange('name')}
/>
</DialogContent>
<DialogActions>
<Button onClick={this.handleClose} color="primary">
Cancel
</Button>
<Button onClick={this.handleClose} color="primary"
onChange={this.handleFieldChange}
value={this.state.value}>
Create
</Button>
</DialogActions>
</Dialog>
<AppBar position="static" className={classes.bar} >
<Toolbar>
<IconButton color="inherit" aria-label="createfolder">
<SvgIcon>
<path d={createfolder}
onClick={this.handleClickOpen}
name="firstName"/>
</SvgIcon>
</IconButton>
</Toolbar>
</AppBar>
</div>
);

Answer 1

No, the best way to do this is not to redirect but same way, in a more modular or component/react way. You can create a functional component of dialog box and include it in your main component,
In the below code the functional component has been made inside the main component class itself so it can access the this.
DialogBox = ({state}) =>(
<Dialog
open={state.open}
onClose={this.handleClose}
aria-labelledby="form-dialog-title">
<DialogTitle id="form-dialog-title">Add Folder</DialogTitle>
<DialogContent>
<TextField
margin="normal"
onChange={this.handleChange('name')}
/>
</DialogContent>
<DialogActions>
<Button onClick={this.handleClose} color="primary">
Cancel
</Button>
<Button onClick={this.handleClose} color="primary"
onChange={this.handleFieldChange}
value={state.value}>
Create
</Button>
</DialogActions>
</Dialog>
)
Now include this in your header-bar component,
const{classes} = this.props
return (
<div>
<AppBar position="static" className={classes.bar} >
<Toolbar>
<IconButton color="inherit" aria-label="createfolder">
<SvgIcon>
<path d={createfolder}
onClick={this.handleClickOpen}
name="firstName"/>
</SvgIcon>
</IconButton>
</Toolbar>
</AppBar>
<this.DialogBox state={this.state}/>
</div>
);