Show view fails silently when its prop actions is populated with a class defined component

Question

The following code makes the Show view to appear empty (completely white), with no errors in the browser's console nor in the webpack development server console:

const actionStyle = {
    zIndex: 2,
    display: 'inline-block',
    float: 'right',
};

class ActionButtons extends React.Component{
  render(){
    const {basePath, data, refresh} = this.props;
    return (
      <CardActions style={actionStyle}>
        <FlatButton secondary label="Process" icon={<ProcessIcon />} />
        <ListButton basePath={basePath} record={data} />
        <FlatButton primary label="Refresh" onClick={refresh} icon={<RefreshIcon />} />
      </CardActions>
    );
  }
}


const ShowContactRequest = (props) => (
    <Show title={<RecordTitle />} actions={<ActionButtons />} {...props}>
      <SomeOtherComponentImportedFromSomeWhere />
    </Show>
);

When the component ActionButtons is provided via flat function, the Show view works with no issues.

I need to create the actions component as a class so I can access the redux store.

Any clue what I'm doing wrong?

Thanks.

Answer 1

I found the problem, I wasn't exporting the component properly. Fixed now, thanks.