I'm using Admin on Rest 1.2 and I want to create a custom 'My Account Page' for the dashboard. So I created a custom route for that and I prepared a custom query to API which works perfectly. But when I want to get the values from this.state
to Edit Component I've got error Cannot read property '_currentElement' of null
. How should I pass custom props to Edit component?
My custom page looks like that:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import AvatarUpload from './AvatarUploadComponent';
// import FlatButton from 'material-ui/FlatButton';
import { showNotification as showNotificationAction } from 'admin-on-rest';
import { push as pushAction } from 'react-router-redux';
import {TextField, RaisedButton} from 'material-ui';
import { GET_ONE, UPDATE, SimpleForm, DisabledInput, LongTextInput, Edit } from 'admin-on-rest';
import restClient from '../RestClient';
const initialState = {
user: {
first_name: "",
last_name: "",
current_password: "",
new_password: "",
confirm_password: "",
avatar_url: ""
}
};
export const MyAccountEdit = (props) => (
<Edit title="My account" {...props}>
<SimpleForm>
<DisabledInput source="first_name" />
<LongTextInput source="last_name" />
<LongTextInput source="first_name" />
</SimpleForm>
</Edit>
);
class MyAccountForm extends Component {
constructor(props) {
super(props);
this.state = initialState;
this.handleChange = this.handleChange.bind(this);
this.handleClick = this.handleClick.bind(this);
this.componentWillMount = this.componentWillMount.bind(this);
}
componentWillMount = () => {
const { showNotification } = this.props;
restClient(GET_ONE, 'users', { id: 2 })
.then((req) => {
this.setState({user: req.data});
showNotification('Account has been getted');
// push('/myaccount');
})
.catch((e) => {
console.error(e);
showNotification('Error: Account hasn\'t been getted', 'warning');
});
};
handleChange = (event, newValue) => {
event.persist(); // allow native event access (see: https://facebook.github.io/react/docs/events.html)
// give react a function to set the state asynchronously.
// here it's using the "name" value set on the TextField
// to set state.person.[firstname|lastname].
this.setState((state) => state.user[event.target.name] = newValue);
};
handleClick = () => {
const { push, record, showNotification } = this.props;
// const updatedRecord = { ...record, is_approved: true };
console.log(this.state);
restClient(UPDATE, 'users', { id: 2, data: this.state })
.then(() => {
showNotification('Account has been updated');
push('/myaccount');
})
.catch((e) => {
console.error(e);
showNotification('Error: Account hasn\'t been updated', 'warning');
});
};
render() {
return (<div>
<p>My Account</p>
<img src={this.state.user.avatar_url} />
<p>first name: {this.state.user.first_name}</p>
//below is the problem
<MyAccountEdit {...this.state.user}/>
</div>);
}
}
MyAccountForm.propTypes = {
push: PropTypes.func,
record: PropTypes.object,
showNotification: PropTypes.func,
};
export default connect(null, {
showNotification: showNotificationAction,
push: pushAction,
})(MyAccountForm);