Edit component inside Drawer component - reactjs

Question

I am using react-admin framework and I am trying to put the <Edit> component inside <Drawer> component. I need this in order to be able to save changes done in my JsonInput.
This is my custom component:
import React, { Component, Fragment } from 'react';
import { fetchUtils, CardActions, EditButton, Button, List, Datagrid, Edit } from 'react-admin';
import Drawer from '#material-ui/core/Drawer';
import JsonInput from 'react-json-view';
import EditIcon from '#material-ui/icons/Edit';
import IconKeyboardArrowRight from '#material-ui/icons/KeyboardArrowRight';
import { SimpleForm } from 'ra-ui-materialui/lib/form';
const divStyle = {
width: '400px',
margin: '1em'
};
export default class JsonEditButton extends React.Component {
constructor(props, context) {
super(props, context);
this.state = { showPanel: false };
}
handleClick = () => {
this.setState({ showPanel: true });
};
handleCloseClick = () => {
this.setState({ showPanel: false });
};
onChange = (value) => {
const { updated_src, name, namespace, new_value, existing_value } = value;
//this.onChange(updated_src);
}
render() {
const { showPanel } = this.state;
return (
<div>
<Button label="Upravit JSON" onClick={this.handleClick}>
<EditIcon />
</Button>
<Fragment>
<Drawer
anchor="right"
open={showPanel}
onClose={this.handleCloseClick}
>
<div>
<Button label="Zavřít" onClick={this.handleCloseClick}>
<IconKeyboardArrowRight />
</Button>
</div>
<div style={divStyle}>
{props => (
<Edit {...props}>
<SimpleForm>
{this.props.record && <JsonInput src={this.props.record} name={null} displayDataTypes={false} displayObjectSize={false} onEdit={this.onChange} onAdd={this.onChange} onDelete={this.onChange} />}
</SimpleForm>
</Edit>
)}
</div>
</Drawer>
</Fragment>
</div>
);
}
};
However this doesnt return any HTML.
Any idea how to solve this?
Thank you in advance.

Answer 1

Maybe this may help
<div style={divStyle}>
<Edit {...this.props}>
<SimpleForm>
{this.props.record && <JsonInput src={this.props.record} name={null} displayDataTypes={false} displayObjectSize={false} onEdit={this.onChange} onAdd={this.onChange} onDelete={this.onChange} />}
</SimpleForm>
</Edit>
</div>
the previous code where {props => ()} is actually a function or you could try this
<div style={divStyle}>
{props => (
return(
<Edit {...props}>
<SimpleForm>
{this.props.record && <JsonInput src={this.props.record} name={null} displayDataTypes={false} displayObjectSize={false} onEdit={this.onChange} onAdd={this.onChange} onDelete={this.onChange} />}
</SimpleForm>
</Edit>)
)}
</div>