Access the model from the Edit component

Question

I have the following edit component

const UserEdit = (props) => (
  <Edit {...props}>
    <TabbedForm >
      <FormTab label="User Account">
        <DisabledInput source="id" />
        <TextInput source="email" />
        <TextInput source="password" type="password"/>
        <TextInput source="name" />
        <TextInput source="phone" />
        <SelectInput source="role" optionValue="id" choices={choices} />
      </FormTab>
      <FormTab label="Customer Information">
        <BooleanInput label="New user" source="Customer.is_new" />
        <BooleanInput label="Grandfathered user" source="Customer.grandfathered" />
      </FormTab>
    </TabbedForm >
  </Edit>
);

The second FormTab (Customer Information) I only need it to appear if the User model has some information associated (the JSON is something like):

{
   id: <int>,
   name: <string>,
   ....
   Customer: {
       is_new: true,
       grandfathered: true,
   }
}

I'd like to know if I can access somehow the model information (in this case, if the Customer key exists and has info) in order to be able to render or not the <FormTab label="Customer Information">

I'm a little bit lost with the global redux state. I know the data is in the state because I've debugged it with the Redux tools. (I tried to look in this.props but I couldn't find anything to access the global state)

Thanks.

score 4 · Accepted Answer · answered Mar 20 '17 at 21:58

If you need the object when you are building the form you could connect it to the redux store.

import { connect } from 'react-redux';

// this is just a form, note this is not being exported
const UserEditForm = (props) => {
    console.log(props.data); // your object will be in props.data.<id>
    let customFormTab;
    const id = props.params.id;

    if (typeof props.data === 'object' && && props.data.hasOwnProperty(id)) {
        if (props.data[id].something) {
            customFormTab = <FormTab>...;
        }
    }

    return <Edit {...props}>
          <Formtab...
          {customFormTab}
    </Edit>;
}

// this is your exported component
export const UserEdit = connect((state) => ({
    data: state.admin.User.data
}))(UserEditForm);

PS: I'm not sure if this is a nice or desired solution (hopefully someone will correct me if I'm doing something not according to how redux or admin-on-rest was designed).

I think this would work as I can access the Redux state where I can see the redux-form etc. Thank you! — Raul Marrero Rodríguez, Mar 21 '17 at 20:51

Access the model from the Edit component

1 Answers1