Refactoring large View component in React - html

Question

I have a rather large view component to render a form where the user can add comments, upload images, select between multiple other products and submit it. I keep my state and functions in a separate component and am quite happy with that setup.
The view has grown quite substantially and I am not entirely happy with the structure of the app.
Particularly it annoys me that
I have to pass the same props and classes variables to each component I use
I have a mix of logic in my main view component CreateEntryForm and each of the smaller components
Any tips on how to better structure this code is much appreciated
import React from 'react';
import TextField from 'material-ui/TextField';
import Button from 'material-ui/Button';
import { MenuItem } from 'material-ui/Menu';
import { withStyles } from 'material-ui/styles';
import Chip from 'material-ui/Chip';
import Typography from 'material-ui/Typography';
import { CircularProgress } from 'material-ui/Progress';
import EntryImageView from "./entryImageView";
import {MarkedImage} from "./markedImage";
const styles = theme => ({
button: {
margin: theme.spacing.unit,
},
container: {
display: 'flex',
flexWrap: 'wrap',
},
menu: {
width: 200,
},
chipContainer: {
marginTop: theme.spacing.unit * 2,
display: 'flex',
flexWrap: 'wrap',
},
chip: {
margin: theme.spacing.unit / 2,
},
wrapper: {
marginTop: theme.spacing.unit*2
},
});
const ProductFormGroup = (props) => (
<div>
<TextField
id="selectedProduct"
required
select
label="Select a product"
error={props.selectProductError !== ''}
margin="normal"
fullWidth
value={(props.currentEntry.currentProduct === undefined || props.currentEntry.currentProduct === null) ? "" : props.currentEntry.currentProduct}
onChange={props.handleInputChange('currentProduct')}
SelectProps={{
MenuProps: {
className: props.menu,
},
name: "currentProduct"
}}
helperText={props.selectProductError || ""}
>
{props.job.selectedProducts.map((product, index) => (
<MenuItem key={index} value={product}>
{product.name}
</MenuItem>
))}
</TextField>
<TextField
margin="dense"
id="productQuantity"
label="Product Quantity"
fullWidth
name="productQuantity"
onChange={props.handleInputChange('productQuantity')}
value={props.productQuantity} />
<Button color="primary"
onClick={() => props.addSelectedChip()}
disabled={(props.productQuantity === '' || props.currentEntry.currentProduct === null)}>
add product
</Button>
</div>
);
const SelectedProductsGroup = (props) => (
<div>
<TextField
id="currentUpload"
select
label="Select an image to mark"
margin="normal"
fullWidth
value={props.currentUpload || ''}
onChange={props.handleInputChange('currentUpload')}
SelectProps={{
MenuProps: {
className: props.menu,
},
name: "currentUpload"
}}
>
{props.job.selectedUploads.map((file, index) => (
<MenuItem key={index} value={file}>
{file.name}
</MenuItem>
))}
</TextField>
{props.currentUpload &&
<Button color="primary" onClick={() => props.handleAttachmentDialogOpen(props.job.selectedUploads)}>
Edit marker on image
</Button>}
{props.selectedMarkedImage &&
<MarkedImage markerPosition={props.selectedMarkedImage.position}
attachment={props.selectedMarkedImage.attachment}
imageLoaded={props.markedImageLoaded}
handleImageLoaded={props.handleMarkedImageLoaded}
/>}
</div>
);
const SelectedProductsChipContainer = (props) => (
<div className={props.classes.wrapper}>
<Typography type="subheading" gutterBottom>
Selected Products
</Typography>
<div className={props.classes.chipContainer}>
{props.selectedProducts.map((product, index) => {
return (
<Chip
label={`${product.name} (${product.productQuantity})`}
key={index}
className={props.classes.chip}
onRequestDelete={() => props.handleRequestDeleteChip(product, "product")}
/>
)
})}
</div>
</div>
);
const SelectedImagesView = (props) => (
<div className={props.classes.wrapper}>
<Typography type="subheading" gutterBottom>
Selected images
</Typography>
<input type="file" id="myFile" onChange={props.handleFileUpload} />
{props.uploadLoading
? <CircularProgress/>
: null}
{props.selectedUploads.length > 0 && <EntryImageView selectedUploads={props.selectedUploads}
handleRequestDeleteChip={props.handleRequestDeleteChip} />}
</div>
);
const LocationDescriptionTextField = (props) => (
<TextField
id="locationDescription"
label="Location Description"
multiline
rows="4"
value={props.locationDescription}
onChange={props.handleInputChange('locationDescription')}
margin="normal"
fullWidth
/>
);
const CommentsTextField = (props) => (
<TextField
id="comments"
label="Comments"
multiline
rows="4"
value={props.comments}
onChange={props.handleInputChange('comments')}
margin="normal"
fullWidth
/>
);
export const CreateEntryForm = (props) => {
const { classes } = props;
return (
<div>
{props.job && <SelectedProductsGroup {...props} classes={classes}/>}
{props.selectedProducts.length > 0 && <SelectedProductsChipContainer {...props} classes={classes}/>}
{props.job && <ProductFormGroup {...props}/>}
<SelectedImagesView {...props} classes={classes} />
<LocationDescriptionTextField {...props} />
<CommentsTextField {...props} />
<Button color="primary" onClick={props.handleSubmit}>Create entry</Button>
</div>
)
};
export default withStyles(styles)(CreateEntryForm);