Pfthb

I want to create a custom two-column-grid layout on my react-admin project on Edit and Show pages. I want to display selectboxes and the imageupload area on the left column, and the text inputs on the right column by using only one <SimpleForm>.

Simply like this

If I use a div or a <Card> component under <SimpleForm> and <EditController> components, I receive an error.

Warning: React does not recognize the `basePath` prop on a DOM element. 
If you intentionally want it to appear in the DOM as a custom 
attribute, spell it as lowercase `basepath` instead. If you 
accidentally passed it from a parent component, remove it from the DOM 
element.

Is there any way to create a layout without this error?

I solved it with creating another component with using divs, <Grid/> etc, and used that component in <SimpleForm> component.

import withStyles from '@material-ui/core/styles';
import React from 'react';
import 
 EditController,
 SimpleForm,
 TextInput,
 SelectInput,
 Title,
 from 'react-admin';
import Grid from '@material-ui/core/Grid';
import Card from '@material-ui/core/Card';
import Poster from "../customField/Poster";
import EditToolbar from '../toolbar/CustomToolbar'
import EditActions from '../toolbar/CustomActions'

const editStyles = 
 root: display: 'flex', alignItems: 'flex-start', width: '100%',
 form: flexGrow: 9,
;


class CardEdit extends React.Component 
 constructor(props) 
 super(props);
 this.state = 
 refresh: false
 ;
 

 render() 
 const FormDiv = withStyles(editStyles)((children, classes, ...props) => 
 return (
 <div className=classes.root>
 <div className=classes.form>
 <Grid container spacing=24>
 <Grid item xs=6>
 <TextInput source="name" fullWidth />
 </Grid>
 <Grid item xs=6>
 <TextInput source="card_id" fullWidth />
 </Grid>
 </Grid>
 </div>
 </div>
 )
 
 )

 return (
 <EditController ...this.props>
 (resource, record, redirect, save, basePath, version) => 
 return (
 <div>
 <Title defaultTitle="sample"/>
 <Card>
 <div style= margin: '20px 20px 0 0' >
 <EditActions
 basePath=basePath
 resource=resource
 data=record
 hasShow
 hasList
 />
 </div>
 record && (
 <SimpleForm
 basePath=basePath
 redirect=redirect
 resource=resource
 record=record
 save=save
 version=version
 toolbar=<EditToolbar/>
 >

 <FormDiv record=record />
 </SimpleForm>
 )
 </Card>
 </div>
 )
 
 </EditController>
 )
 


export default withStyles(editStyles)(CardEdit);