Tag Archives: JavaScript

Error Adding Card – Assembly Payments

Hi everyone,

Just working with Assembly Payments and ran into the following error while following their documentation on Capturing a Credit Card:

errors”:{“card_account”:[“Error adding card. If error persists, please contact our support team.”]

The error is pretty vague, but it does seem that the credit card info they use in the documentation has expired. I tested with another credit card and it went through:

                    promisepay.createCardAccount(token, {
 
                        full_name: "Bella Buyer",
                        number: "4242424242424242",
                        expiry_month: "12",
                        expiry_year: "2021",
                        cvv: "123"
                    }, success, fail)

Update
I was talking to support about another issue and they mentioned the following page: https://reference.assemblypayments.com/#credit-card-data

Including an Externally Hosted Script in ReactJs

Hi everyone,

Just a quick example of how to include an externally hosted js file in a reactjs app. In index.html add your script tag as you would in a normal app:

  <head>
    <script src="https://js.prelive.promisepay.com/PromisePay.js " type="text/javascript"></script>
  </head>

Then in the file you plan to use the library you can add a const and reference it normally:

const promisepay = window.promisepay;

Thanks to this link for the info: https://stackoverflow.com/a/44877953/522859

Allow Number and String for PropTypes – ReactJS

Hi everyone,

A quick post on how to allow a string or number when defining PropTypes:

static propTypes = {
        numberField: PropTypes.number.isRequired,
        stringField: PropTypes.number.isRequired,
        mixedField: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
    }

Thanks to this stackoverflow post for the info: https://stackoverflow.com/a/41808543/522859

Avoiding Wrapper Divs in ReactJs

Hi everyone,

Just a quick post on how you can avoid wrapper divs in ReactJs. It’s particularly useful when populating tables or creating parts of a larger component. Instead of the following:

return (
  <div>
    <td>Frogs</td>
    <td>Turtles</td>
  </div>
);

You can use fragments:

import React, { Fragment } from 'react'
...
return (
  <Fragment>
    <td>Frogs</td>
    <td>Turtles</td>
  </Fragment>
);

The fragment won’t polute the dom and mean that you don’t need to add any additional styling. Check out these links for more info:
https://reactjs.org/docs/fragments.html
https://stackoverflow.com/a/49375945/522859
https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html

Adding a Link to a Drawer – Material UI and ReactJS

Hi everyone,

I ran into a bit of an issue turning a menuitem into a link with Material UI and React-Router. The main problems being that underlines appeared and threw the spacing out.

To summarize, use the component attribute on the ListItem:

<List>
   <ListItem button component={Link} to="https://www.whatibroke.com">
        <ListItemText primary="WhatIBroke" />
   </ListItem>
</List>

The official docs cover it here: https://material-ui.com/api/list-item/

See the following stackoverflow post for more info: https://stackoverflow.com/a/50558139/522859

Where to Import Colors from in MaterialUI – ReactJS

Hey everyone,

I ran into the following error while trying to import colors in MaterialUI:

Module not found: Can’t resolve ‘material-ui/styles/colors’

It turns out that the path to colors changed in V1, so a lot of guides aren’t quite right. All you need to do is change it to the following:

/* import {grey, amber} from ‘material-ui/styles/colors’ Original */
import {grey, amber} from ‘material-ui/colors’ /* New */

Thanks to this Github post for the answer: https://github.com/mui-org/material-ui/issues/6446

Full Page Layout Example for Material UI – ReactJS

Hi everyone,

I’ve spent the last couple of days looking into MaterialUI. It seems really good however there are very few examples of a layout wireframe. After digging through Github I came across the following CodeSandbox:

There are a number of other themes and templates available (such as the amazing Material Dashboard) but they are all very in depth and not really suitable for a quick prototype or mock.

Thanks to Luke Peavey for posting the answer on StackOverflow. It definitely deserves a lot more views: https://stackoverflow.com/a/50312721/522859

Hopefully, this will be able to save someone else a bit of time!

Cheers,
Chris

Pass a Component as a Child Prop and Render it – ReactJs

Hi everyone,

A quick post on how to pass a component as a prop and then render it as a child.

const ChildComponent = () => <div>Child Component</div>;
 
const MainComponent = (props) => <div><div>Main component. Child appears below</div>{props.content}</div>;
 
class App extends React.Component {
 
  render () {                                        
    return (
      <div>          
          <MainComponent content={<ChildComponent />} />          
      </div>
    );
  }
}

An alternative to all of this that I wasn’t aware of is to to use “children”:

See the Pen ozqNOV by Dan Abramov (@gaearon) on CodePen.

Thanks to the following stackoverflow post for the info: https://stackoverflow.com/a/41499555/522859

Module not found: Can’t resolve ‘babel-polyfill’ in ‘C:\Users\source\repos\frontend\src

Hi everyone,

I was looking into asynchronous requests with redux tonight and hit the following error:

Module not found: Can’t resolve ‘babel-polyfill’ in ‘C:\Users\source\repos\frontend\src

This is used to provide a promise polyfill for a fetch package mentioned in the tutorial. In order to fix it, just run the following:

npm install babel-polyfill

Thanks to the following post for the solution: https://stackoverflow.com/a/33568284/522859

index.js:2178 Warning: A component is changing an uncontrolled input of type checkbox to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components

Hi everyone,

Bit of a silly error I ran into today. This one took an embarrassingly long time to figure out unfortunately:

index.js:2178 Warning: A component is changing an uncontrolled input of type checkbox to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components

It turned out that the error was a result of not having added the state variable in the constructor. It was then being created onChange and converting the input element into a controlled input.

I was trying to use a checkbox in my form and had copied the input from another view:

  1. <label>Ticket</label>
    
  2. <input name="IsTicket" type="checkbox" checked={this.state.IsTicket} onChange={(event) => {this.handleChange(event)}} />

HandleChange is as follows:

/* Sets a state value based on the name of the input changed */
handleChange: function (caller, event) {

const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;

caller.setState({ [name]: value });
}

Bit of a silly one, but hopefully it will be able to help out anyone else who runs into it!

Cheers,
Chris