How to use the react-i18next.translate function in react-i18next

import {Cytoscape} from "./MessageFlow/containers";
import {loadMessageFlow} from "./core/localStorage";

interface MessageFlowProps extends RouteComponentProps<{ id: string }>, InjectedTranslateProps {
}

class MessageFlow extends React.Component{

    render(){
        return 
            
        ;
    }
}

export default translate('translation')(MessageFlow);

<h4>Login with your CERN account</h4>
                <button> ElectronService.setUserAsUnauthenticated()}
                &gt;
                  Logout
                </button>
              
            
          
        
      
    );
  }
}

export default translate('translations')(LoginPage);

/>
            
          
        
      
    );
  }
}

export default compose(
  translate(),
  withStyles(styles),
)(FairyDetail);

{(this.state.errorMessage !== null && (
                                    <div style="{{">
                                        <strong>Danger !</strong> {this.state.errorMessage}
                                    </div>
                                ))}
                            
                        
                    
                
            
        );
    }
}

export default translate('common', { wait: process &amp;&amp; !process.release })(withRouter(Login));

validate={validate}
            wallet={wallet}
          />
        )}
        icon="microchip"
        onClose={onClose}
        openModal={openModal}
        settings={settings}
        system={system}
        title={t('tools_modal_delegation_header')}
      />
    );
  }
}

export default translate('tools')(ToolsModalDelegation);

inverted="true"
      >
        

      
    );
  }
}

export default translate('wallet')(WalletLanguage);

content={blockchain.name}
                    size="small"
                    style={{ margin: 0 }}
                    textAlign="center"
                  />
                
              
            
          
        
      
    );
  }
}

export default translate('global')(PromptHeader);

Card,
  Dialog,
  BreadCrumb
} from 'components/Layout';
import Status from 'components/Status';
import Toolbar from 'components/Toolbar';
import TimeShow from 'components/TimeShow';
import roles, { roleMap } from 'config/roles';
import routes, { toRoute } from 'routes';
import GroupCard from './GroupCard';

import styles from './index.scss';

const emailRegexp = '^[A-Za-z0-9._%-]+@([A-Za-z0-9-]+\\.)+[A-Za-z]{2,4}$';

@translate()
@inject(({ rootStore }) => ({
  userStore: rootStore.userStore
}))
@observer
export default class Users extends Component {
  async componentDidMount() {
    const { userStore } = this.props;
    await userStore.fetchAll();
  }

  componentWillUnmount() {
    const { userStore } = this.props;
    userStore.reset();
  }

  changeSelect = value => {

]}
              />
              
            
          )
        }
      
    );
  }
}

export default translate('transaction')(WalletModalContentBroadcast);

UploadFullscreen.defaultProps = {
    headlineText: "Upload a new avatar",
    buttonText: "Upload"
};

const mapStateToProps = state => {
    return {};
};

const mapDispatchToProps = dispatch => {
    return {
        openSnackbar: message => dispatch(openSnackbar(message))
    };
};

export default translate("translations")(
    connect(
        mapStateToProps,
        mapDispatchToProps
    )(UploadFullscreen)
);