We Keep Coding

why is chrome payment sheet closed instantly when clicking on rendered Stripe PaymentRequestButtonElement?

I'm implementing a payment request button with react and using #stripe/react-stripe-js #stripe/stripe-js. My issue is when I click the pay now button, the Chrome payment sheet is opened and closed instantly without any error on the console. Please note that I am using Mac Pro M1 and I am using ngrok and I have saved some strip test cards in my Chrome. Below is my code.
GooglePayCheckoutForm.tsx
import React, { PureComponent, ReactNode } from 'react';
import { Loader } from 'components/common';
import {
PaymentMethod,
PaymentRequest, Stripe, StripeElements, StripePaymentRequestButtonElementClickEvent,
} from '#stripe/stripe-js';
import { ElementsConsumer } from '#stripe/react-stripe-js';
import {
Form, Input, Result,
} from 'antd';
import { FormComponentProps } from 'antd/lib/form';
import { SubscriptionPlans, SubscriptionTypes } from 'core/enums/contract';
import plans from 'core/enums/plans';
import GooglePayBottonElement, { NotAvailableResult } from './GoogleButtonElement';
import styles from '../../styles.module.scss';
type GooglePayCheckoutFormOwnProps = {
stripe?: Stripe | null;
elements?: StripeElements | null;
plan: SubscriptionPlans.PRO | SubscriptionPlans.ENTERPRISE;
type: SubscriptionTypes;
};
type GooglePayCheckoutFormProps = FormComponentProps & GooglePayCheckoutFormOwnProps;
type GooglePayCheckoutFormStates = {
canMakePayment: boolean;
hasCheckedAvailability: boolean;
paymentMethod: PaymentMethod | null;
errorMessage: string | null;
processingGooglePay: boolean;
};
class GooglePayCheckoutForm extends PureComponent<GooglePayCheckoutFormProps, GooglePayCheckoutFormStates> {
paymentRequest: PaymentRequest;
constructor(props: GooglePayCheckoutFormProps) {
super(props);
this.state = {
canMakePayment: false,
hasCheckedAvailability: false,
paymentMethod: null,
errorMessage: null,
processingGooglePay: true,
};
}
async componentDidUpdate() {
const { stripe } = this.props;
if (stripe && !this.paymentRequest) {
await this.createPaymentRequest(stripe);
}
}
handleGooglePayButton(event:StripePaymentRequestButtonElementClickEvent, paymentMethod:PaymentMethod | null) {
if (paymentMethod) {
event.preventDefault();
this.setState({
errorMessage:
'You can only use the PaymentRequest button once. Refresh the page to start over.',
});
}
}
async createPaymentRequest(stripe: Stripe) {
const { plan, type } = this.props;
const selectedPlan = plans.find((item) => item.id === plan);
if (selectedPlan) {
this.paymentRequest = stripe.paymentRequest({
currency: selectedPlan.currencyAbbreviation,
total: {
label: 'total',
amount: selectedPlan.priceNumber[type],
},
country: 'DE',
disableWallets: ['applePay'],
});
this.paymentRequest.on('paymentmethod', async (event) => {
this.setState({ paymentMethod: event.paymentMethod });
event.complete('success');
// Submiting to server should take place here.
// this.handleSubmit()
});
const canMakePaymentRespose = await this.paymentRequest.canMakePayment();
if (canMakePaymentRespose) {
this.setState({ canMakePayment: true, hasCheckedAvailability: true, processingGooglePay: false });
} else {
this.setState({ canMakePayment: false, hasCheckedAvailability: true, processingGooglePay: false });
}
}
}
render(): ReactNode {
const {
canMakePayment,
hasCheckedAvailability,
errorMessage,
paymentMethod,
} = this.state;
const {
elements,
stripe,
form: { getFieldDecorator },
} = this.props;
if (!elements || !stripe) {
return <Loader loading />;
}
return (
<Loader loading={this.state.processingGooglePay}>
<Form className={styles.paymentForm}>
{(!canMakePayment && hasCheckedAvailability && <NotAvailableResult />)}
{canMakePayment && (
<>
<Form.Item label="Coupon Code" colon={false} labelCol={{ xs: 10, sm: 16 }} wrapperCol={{ xs: 14, sm: 8 }}>
{getFieldDecorator('coupon')(<Input size="large" placeholder="Enter coupon" />)}
</Form.Item>
<GooglePayBottonElement
onClickFunction={(event:StripePaymentRequestButtonElementClickEvent) => this.handleGooglePayButton(event, paymentMethod)}
paymentRequest={this.paymentRequest as PaymentRequest}
/>
</>
)}
{errorMessage && { errorMessage }}
{paymentMethod && (
<Result>
Got PaymentMethod:
{' '}
{paymentMethod.id}
</Result>
)}
</Form>
</Loader>
);
}
}
const WrappedGooglePayCheckoutForm = Form.create<GooglePayCheckoutFormProps>()(GooglePayCheckoutForm);
function InjectedGooglePayCheckoutForm(props: GooglePayCheckoutFormOwnProps) {
return (
<ElementsConsumer>
{({ elements, stripe }) => <WrappedGooglePayCheckoutForm elements={elements} stripe={stripe} {...props} />}
</ElementsConsumer>
);
}
export default InjectedGooglePayCheckoutForm;
index.tsx
import React, { PureComponent, ReactNode } from 'react';
import { Elements } from '#stripe/react-stripe-js';
import { SubscriptionPlans, SubscriptionTypes } from 'core/enums/contract';
import { stripeKey } from 'core/constants/env';
import { Stripe } from '#stripe/stripe-js';
import { loadStripe } from '#stripe/stripe-js/pure';
import GooglePayCheckoutForm from './GooglePayCheckoutForm';
type Props = {
plan: SubscriptionPlans.PRO | SubscriptionPlans.ENTERPRISE;
type: SubscriptionTypes;
};
class GooglePayPayment extends PureComponent<Props> {
stripePromise: Promise<Stripe | null>;
constructor(props: Props) {
super(props);
this.stripePromise = loadStripe(stripeKey as string);
}
render(): ReactNode {
const {
plan,
type,
} = this.props;
return (
<Elements stripe={this.stripePromise} key={stripeKey}>
<GooglePayCheckoutForm
plan={plan}
type={type}
/>
</Elements>
);
}
}
export default GooglePayPayment;
GoogleButtonElement.tsx
import React from 'react';
import { PaymentRequestButtonElement as StripeGooglePayButtonElement } from '#stripe/react-stripe-js';
import { PaymentRequest, StripePaymentRequestButtonElementClickEvent } from '#stripe/stripe-js';
import { Result } from 'antd';
export function NotAvailableResult() {
return (
<Result>
<p style={{ textAlign: 'center' }}>
PaymentRequest is not available in your browser.
</p>
{window.location.protocol !== 'https:' && (
<p style={{ textAlign: 'center' }}>
Try using
{' '}
<a href="https://ngrok.com" target="_blank" rel="noopener noreferrer">
ngrok
</a>
{' '}
to view this demo over https.
</p>
)}
</Result>
);
}
interface GooglePayButtonElementProps {
paymentRequest: PaymentRequest,
onClickFunction:(event: StripePaymentRequestButtonElementClickEvent) => any,
}
function GooglePayButtonElement({ paymentRequest, onClickFunction }:GooglePayButtonElementProps) {
return (
<StripeGooglePayButtonElement
onClick={onClickFunction}
options={{
paymentRequest,
style: {
paymentRequestButton: {
type: 'subscribe',
theme: 'dark',
},
},
}}
/>
);
}
export default GooglePayButtonElement;

Inside the paymentRequest.on('paymentmethod') handler, You should call stripe.confirmCardPayment to submit the payment. Sample code is available in the integration guide.
Also instead of saving a card in Chrome, you need to add an active card to your Google Pay account in order to use Google Pay.

How to open another tab using React

I have written a simple piece of code to open another tab using React. It currently does not work. I think that something very simple has gone wrong but I am unsure where.
Message.component.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { fetchData, GET } from '../DAL';
import Inbox from "/Messages/GetMessages";
<Route path="/Messages/GetMessages" component={MENU.inbox} />
handleClick()
{
//this will open the inbox in a new tab
window.open("/Messages/GetMessages");
}
I have added the reference in the Dal.js file
Dal.js
export function fetchData(API)
{
return getAsync(API);
}
async function getAsync(API)
{
try
{
let response = await fetch(API);
let data = await response.json();
data = JSON.parse(data);
return data;
}
catch (e)
{
console.log("ERROR FOUND IN " + API, e);
return [];
}
}
export const GET = {
INBOX:'Messages/GetMessages'}
It is also in the menu component, so that it can be seen where it is used.
Menu.component.jsx
import React from 'react';
import { Button, Icon } from 'semantic-ui-react'
export const MENU = {
INBOX: 'INBOX'
};
export default class MainMenu extends React.Component {
constructor(props)
{
super(props)
this.state = {
active: MENU.ASSETS
};
}
_onClick = (item) =>
{
if (this.state.active !== item)
{
this.setState({active: item})
}
() => this.props.visible();
}
_triggerUserProfile()
{
showEditUserForm(51, 10)
}
render() {
let buttonStyle = {backgroundColor: '#5d7090', color: 'white'};
let icon = this.props.icon;
return (
<MainMenuContainer>
<div style={{margin: '5px'}}>
<img width='75px' style={{marginBottom: '5px'}} src="Content/img/logo_white.svg"/>
<IconButton onClick={() => this.props.visible()}>
<Icon name={icon}></Icon>
</IconButton>
<span onClick={() => this._triggerUserProfile()} style={{float: 'right', color: 'white', marginBottom: 'auto', marginTop:'7px', cursor: 'pointer'}}>Welcome Back, Alex! <Icon name='chevron down'></Icon></span>
</div>
<div>
<Button animated='vertical' style={buttonStyle} onClick={() =>
this.props.handleClick(MENU.INBOX)}>
<Button.Content hidden>Inbox</Button.Content>
<Button.Content visible>
<Icon name='mail' />
</Button.Content>
</Button>
</div>
</MainMenuContainer>
Currently nothing happens and the react crashes silently.

You can try like this : window.open("url","_self");

You're looking for
window.open('url', '_blank');

onClick function fires after clicking twice

For some reason, the onClick will not fire once, but if clicked twice. The this.props.PostLike(id) action will be fired, What should i do to make it work only on one click.
Also, the heart state works fine, in just one click. Its just the this.props.postLike needs to be clicked twice for it work.
And using e.preventDefault() does not solve the issue.
....
clickLike = (id) => {
this.props.postLike(id);
// toggles between css class
this.setState({
heart: !this.state.heart
})
}
render(){
return(
<div style={{float:'right', fontSize: '1.5em', color:'tomato'}} >
<i style={{ marginRight: '140px'}} className={this.state.heart ? 'fa fa-heart':'fa fa-heart-o' }>
<span style={{ marginLeft: '6px'}}>
<a href="#" onClick={() =>this.clickLike(this.props.like)}>Like</a>
</span>
{/* gets the like counts */}
<span style={{ marginLeft: '7px'}} >{this.props.likes} </span>
</i>
</div>
)
}
}
const mapStateToProps = (state) => ({
})
const mapDispatchToProps = (dispatch) => ({
postLike: (id) => dispatch( postLike(id))
// Pass id to the DeletePost functions.
});
export default connect(null, mapDispatchToProps)(Like);
PostItem.js
import React, { Component } from 'react';
import Paper from '#material-ui/core/Paper';
import Button from '#material-ui/core/Button';
import Typography from '#material-ui/core/Typography';
import moment from 'moment';
import Editable from './Editable';
import {connect} from 'react-redux';
import {UpdatePost, postLike, getCount} from '../actions/';
import Like from './Like';
import Axios from '../Axios';
const Styles = {
myPaper: {
margin: '20px 0px',
padding: '20px'
},
button:{
marginRight:'30px'
}
}
class PostItem extends Component{
constructor(props){
super(props);
this.state = {
disabled: false,
myId: 0,
likes:0
}
}
onUpdate = (id, title) => () => {
// we need the id so expres knows what post to update, and the title being that only editing the title.
if(this.props.myTitle !== null){
const creds = {
id, title
}
this.props.UpdatePost(creds);
}
}
render(){
const {title, id, userId, removePost, createdAt, post_content, username, editForm, isEditing, editChange, myTitle, postUpdate, Likes, clickLike, myLikes} = this.props
return(
......
{/* likes get like counts */}
<Like like={id} likes={myLikes} />
.......
Posts.js
render() {
const {loading} = this.state;
const {myPosts} = this.props
console.log(this.state.posts);
if (!this.props.isAuthenticated) {
return (<Redirect to='/signIn'/>);
}
if (loading) {
return "loading..."
}
return (
<div className="App" style={Styles.wrapper}>
<h1>Posts</h1>
{/* <PostList posts={this.state.posts}/> */}
<div>
{this.state.posts.map(post => (
<Paper key={post.id} style={Styles.myPaper}>
<PostItem myLikes={post.Likes.length} // right here
myTitle={this.state.title} editChange={this.onChange} editForm={this.formEditing} isEditing={this.props.isEditingId === post.id} removePost={this.removePost} {...post}/>
</Paper>
))}
</div>
</div>
);
}
}
PostList.js
import React, { Component } from 'react';
import Paper from '#material-ui/core/Paper';
import Button from '#material-ui/core/Button';
import Typography from '#material-ui/core/Typography';
import moment from 'moment';
import {connect} from 'react-redux';
import { withRouter, Redirect} from 'react-router-dom';
import {DeletePost, postLike, UpdatePost,EditChange, GetPosts, getCount, DisableButton} from '../actions/';
import PostItem from './PostItem';
import _ from 'lodash';
const Styles = {
myPaper: {
margin: '20px 0px',
padding: '20px'
}
}
class PostList extends Component{
constructor(props){
super(props);
this.state ={
title: '',
posts:[],
loading:true
}
}
componentWillMount() {
this.props.GetPosts();
}
componentWillReceiveProps(nextProps, prevState) {
let hasNewLike = true;
if (prevState.posts && prevState.posts.length) {
for (let index = 0; index < nextProps.myPosts.length; index++) {
if (nextProps.myPosts[index].Likes.length !== prevState.posts[index].Likes.length) {
hasNewLike = true;
}
}
}
if (hasNewLike) {
this.setState({posts: nextProps.myPosts, loading: false}); // here we are updating the posts state if redux state has updated value of likes
}
}
// Return a new function. Otherwise the DeletePost action will be dispatch each
// time the Component rerenders.
removePost = (id) => () => {
this.props.DeletePost(id);
}
onChange = (e) => {
e.preventDefault();
this.setState({
title: e.target.value
})
}
formEditing = (id) => ()=> {;
this.props.EditChange(id);
}
render(){
const { posts, loading} = this.state;
// console.log(this.props.posts)
// console.log(this.props.ourLikes);
if(loading){
return "loading..."
}
return (
<div>
{this.state.posts.map(post => (
<Paper key={post.id} style={Styles.myPaper}>
<PostItem
myLikes={post.Likes.length} // right here
myTitle={this.state.title}
editChange={this.onChange}
editForm={this.formEditing}
isEditing={this.props.isEditingId === post.id}
removePost={this.removePost}
{...post}
/>
</Paper>
))}
</div>
);
}
}
const mapStateToProps = (state) => ({
isEditingId: state.post.isEditingId,
myPosts: state.post.posts,
})
const mapDispatchToProps = (dispatch) => ({
// pass creds which can be called anything, but i just call it credentials but it should be called something more
// specific.
GetPosts: () => dispatch(GetPosts()),
EditChange: (id) => dispatch(EditChange(id)),
UpdatePost: (creds) => dispatch(UpdatePost(creds)),
postLike: (id) => dispatch( postLike(id)),
// Pass id to the DeletePost functions.
DeletePost: (id) => dispatch(DeletePost(id))
});
// without withRouter componentWillReceiveProps will not work like its supposed too.
export default withRouter(connect(mapStateToProps,mapDispatchToProps)(PostList));

Try doing like that:
clickLike = (id) => () => {
this.props.postLike(id);
// toggles between css class
this.setState({
heart: !this.state.heart
})
}
<a href="#" onClick={this.clickLike(this.props.like)}>Like</a>

This likely has little to do with the logic you have set up and more about the html markup itself. If you were to take in the event and console.log it, you'll probably find that you are actually not hitting the tag on the first click, but one of its outer elements. Try wrapping the tag and everything else inside of it in a tag then putting the onClick logic in the button instead and you'll yield better results.
<div style={{float:'right', fontSize: '1.5em', color:'tomato'}} >
<button onClick={() =>this.clickLike(this.props.like)}>
<i style={{ marginRight: '140px'}} className={this.state.heart ? 'fa fa-heart':'fa fa-heart-o' }>
<span style={{ marginLeft: '6px'}}>
Like
</span>
{/* gets the like counts */}
<span style={{ marginLeft: '7px'}} >{this.props.likes} </span>
</i>
</button>
div>

You have to be careful when using arrow functions with the this keyword as it does not refer to the current object, but its parent object instead.

clickLike = async(id) => {
await this.props.postLike(id);
// toggles between css class
this.setState({
heart: !this.state.heart
})
}
try using the async await
<span style={{ marginLeft: '6px'}} onClick=
{()=>this.clickLike(this.props.like)}>
<a href="#" >Like</a>
</span>

How to combine Material-UI's snackbar and input components in react?

I'm using Material-UI components to build my website. I have a header component with a search field which uses mui InputBase under the hood. When user enters empty input (that is they don't enter anything and just click enter) I want to display a mui Snackbar which will warn the user the no meaningful input was entered.
I can't get the combination of the two components to work together. In addition because search field state doesn't really change when user enters nothing it doesn't reload so if user repeatedly presses Enter the snackbar won't appear. I use this.forceUpdate(); but is there a more elegant way to implement such logic?
This is my code:
for the search input field:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import InputBase from '#material-ui/core/InputBase';
import { withStyles } from '#material-ui/core/styles';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { getAppInfo } from '../../actions/appActions.js';
import constants from '../../constants.js';
import { AppSearchBarInputStyles } from '../styles/Material-UI/muiStyles.js';
import AppNotFound from './AppNotFound.js';
class AppSearchBarInput extends Component {
state = {
appId: ''
}
onChange = e => {
this.setState({ appId: e.target.value });
}
onKeyDown = e => {
const { appId } = this.state;
if (e.keyCode === constants.ENTER_KEY && appId !== '') {
this.props.getAppInfo({ appId });
this.setState({
appId: ''
});
}
this.props.history.push('/app/appInfo');
this.forceUpdate();
}
render() {
const { classes } = this.props;
const { appId } = this.state;
console.log(`appId from AppSearchInput=${appId === ''}`);
return (
<div>
<InputBase
placeholder="Search…"
classes={{
root: classes.inputRoot,
input: classes.inputInput,
}}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
value={this.state.appId} />
{ appId === '' ? <AppNotFound message={constants.MESSAGES.APP_BLANK()}/> : ''}
</div>
)
}
}
AppSearchBarInput.propTypes = {
classes: PropTypes.object.isRequired
}
const AppSearchBarWithStyles = withStyles(AppSearchBarInputStyles)(AppSearchBarInput);
const AppSearchBarWithStylesWithRouter = withRouter(AppSearchBarWithStyles);
export default connect(null, { getAppInfo })(AppSearchBarWithStylesWithRouter);
for the snackbar:
import React from 'react';
import Snackbar from '#material-ui/core/Snackbar';
import constants from '../../constants.js';
import SnackbarMessage from './SnackbarMessage.js';
class AppNotFound extends React.Component {
state = {
open: true,
};
handleClose = event => {
this.setState({ open: false });
};
render() {
const { message } = this.props;
return (
<Snackbar
anchorOrigin={{
vertical: 'top',
horizontal: 'center',
}}
open={this.state.open}
autoHideDuration={6000}
onClose={this.handleClose}
>
<SnackbarMessage
onClose={this.handleClose}
variant="warning"
message={message}
/>
</Snackbar>
);
}
}
export default AppNotFound;

I think the good way to achieve what You want is by adding another state property called snackBarOpen which will help You to determine if user has entered empty value or something meaningful:
AppSearchBarInput Component
state = {
appId: '',
snackBarOpen: false
}
handleKeyDown = (e) => {
if (e.keyCode === 13 && e.target.value === '') {
this.setState({
appId: e.target.value,
snackBarOpen: true
});
} else {
this.setState({
appId: e.target.value
})
}
}
handleCloseSnackBar = () => {
this.setState({
snackBarOpen: false
});
}
And then just render also <AppNotFound /> in render() method(it will be hidden by default because it will depend on open prop):
render() {
const { snackBarOpen } = this.state;
return(
<div>
/* <InputBase /> here */
<AppNotFound message={/* Your message here */} open={snackBarOpen} onClose={this.handleCloseSnackBar} />
</div>
)
}
AppNotFound Component
You can remove all methods now and leave only render() one which will look next:
render() {
const { message, open, onClose } = this.props;
return (
<Snackbar
// ...
open={open}
// ...
onClose={onClose}
>
<SnackbarMessage
onClose={onClose}
// ...
message={message}
/>
</Snackbar>
);
}
Hope that my answer will be useful :)

How to get input value of TextField from Material UI?

So, before using material UI, my code was like this. To implement edit feature for ToDo app I used ref from textarea for get current (default) value in there, and then save updated value in save () method (don't worry about editItem method, it is in another component, and I believe there is no need to post him, because the problem is not there)
import React, {Component} from 'react';
import './ToDoItem.css';
import EditButton from './EditButton';
import DeleteButton from './DeleteButton';
import SaveButton from './SaveButton';
import EditToDoField from './EditToDoField';
class ToDoItem extends Component {
constructor(props) {
super(props);
this.state = {
editMode: false,
}
};
edit = () => {
this.setState ({editMode: true});
};
save = () => {
let updToDo = this.refs.newToDo.value;
this.props.editItem (updToDo);
this.setState ({
editMode: false})
};
renderNormal = () => {
return (
<div className="ToDoItem">
<p className="ToDoItem-Text">{this.props.todo}</p>
<EditButton editHandler={this.edit} />
</div>
);
};
renderEdit = () => {
return (
<div className="ToDoItem">
<textarea ref="newToDo" defaultValue={this.props.todo}></textarea>
<SaveButton saveHandler={this.save} />
</div>
);
};
render() {
if (this.state.editMode) {
return this.renderEdit ();
} else {
return this.renderNormal ();
}
}
}
export default ToDoItem;
So, now I trying to implement beautiful TextField from material UI, texarea tag was deleted and here is the respective additions to code:
<EditToDoField
ref="newToDo"
defaultToDoValue={this.props.todo}
/>
and EditToDoField component:
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '#material-ui/core/styles';
import TextField from '#material-ui/core/TextField';
const styles = theme => ({
container: {
display: 'flex',
flexWrap: 'wrap',
},
textField: {
marginLeft: theme.spacing.unit,
marginRight: "61px",
},
});
class OutlinedTextFields extends React.Component {
render() {
const { classes } = this.props;
return (
<form className={classes.container} noValidate autoComplete="off">
<TextField
id="outlined-editToDO"
label="Edit ToDo"
defaultValue={this.props.defaultToDoValue}
className={classes.textField}
multiline
margin="normal"
variant="outlined"
/>
</form>
);
}
}
OutlinedTextFields.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(OutlinedTextFields);
So I pass current (default) value to EditToDoField, but when I'm trying to save updated ToDo text, I got empty field in result. I understand that most probably I just missed something, but still don't get what. I also tried to use "innerRef" and "inputRef" instead of "ref", but no luck. Can you please help me with this stuff ?

Add a simple event handler when the user enters text, you can then use a callback to move the input from the text field to whatever component you want, here's the full example
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '#material-ui/core/styles';
import TextField from '#material-ui/core/TextField';
const styles = theme => ({
container: {
display: 'flex',
flexWrap: 'wrap'
},
textField: {
marginLeft: theme.spacing.unit,
marginRight: '61px'
}
});
class OutlinedTextFields extends React.Component {
handleOnChange = event => {
console.log('Click');
console.log(event.target.value);
};
render() {
const { classes } = this.props;
return (
<form className={classes.container} noValidate autoComplete="off">
<TextField
id="outlined-editToDO"
label="Edit ToDo"
defaultValue={this.props.defaultToDoValue}
className={classes.textField}
multiline
margin="normal"
variant="outlined"
onChange={this.handleOnChange}
/>
</form>
);
}
}
OutlinedTextFields.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(OutlinedTextFields);