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

System.Security.SecurityException Failed to negotiate HTTPS Connection – Fiddler

Hi everyone,

I hit the following error when trying to execute a composed request with Fiddler:

[Fiddler] The connection to ‘abc.com’ failed.
System.Security.SecurityException Failed to negotiate HTTPS connection with server.fiddler.network.https> HTTPS handshake to abc.com (for #32) failed. System.Security.Authentication.AuthenticationException A call to SSPI failed, see inner exception. < The function requested is not supported

All that was required to fix it was to add tls 1.2:

  • Tools
  • Options
  • HTTPS
  • Protocols
  • Add tls1.2 to the end of the list and click ok

Thanks to this link for the info: https://www.telerik.com/forums/some-https-sites-are-unaccessible-when-using-fiddler

Error Number:8152,State:10,Class:16 String or binary data would be truncated. The statement has been terminated. – Entity Framework

Hi everyone,

I ran into the following error after adding model validation attributes to a database with existing values:

Error Number:8152,State:10,Class:16
String or binary data would be truncated.
The statement has been terminated.

The solution is pretty straightforward if you’re happy to truncate the values. Simply run the query below, swapping Title for your column name, Products for your table name and 25 for your new column length:

UPDATE Products
SET Title = LEFT(Title, 25)
WHERE LEN(Title) > 25

You should then be able to run update-database without any issues:

PM> update-database
Specify the ‘-Verbose’ flag to view the SQL statements being applied to the target database.
Applying explicit migrations: [201806240741543_product_validation].
Applying explicit migration: 201806240741543_product_validation.
Running Seed method.
PM>

Thanks to David in for his answer on Stackoverflow: https://stackoverflow.com/a/24931522/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

Overriding Button Styles and Hover Effects – Material UI

Hi everyone,

Just a quick post on how to override the background color and hover effects for buttons in material ui:

Define your class as follows:

 
const styles = theme => ({
    ...
    greenButton: {
        backgroundColor: green[500],
        color: '#FFF',
        '&:hover': {
            backgroundColor: green[400],
            color: '#FFF'
        }
    }

Then just reference it as you normally would:

 
const styles = theme => ({
 
const { classes } = this.props;
 
<Button size="small" className={classes.greenButton} variant="raised">
      <AddShoppingCartIcon />
</Button>

Multiple Instances of Component Firing Incorrect onChange – ReactJS

Hi everyone,

I ran into a bit of an issue today while trying to render multiple instances of a component on a single page. Each component had a file input that was bound with an onChange event. When triggered the onChange function referenced the first component placed on the page no matter which instance was clicked.

The issue ended up being that the id of the input fields coincidentally overlapped. This meant that there were multiple instances of the field on the page with the same id value. Ensuring that each one was unique resolved the issue.

Took a fair while to narrow this one down so hopefully it’ll be able to help someone else!

Thanks,
Chris

LINQ to Entities does not recognize the method ‘System.Linq.IQueryable

Hi everyone,

I ran into the following error today while attempting to use a raw query with entity framework:

LINQ to Entities does not recognize the method ‘System.Linq.IQueryable…method, and this method cannot be translated into a store expression

I was using FromQuery, and while I’m not too sure what was causing the issue, switching to SqlQuery resolved it:

// Original code
var carList = resp.Db.Cars.FromSql(“SELECT * FROM cars”);
// Changed code
var carList = resp.Db.Cars.SqlQuery(“SELECT * FROM cars”);

Hopefully that’s able to help out anyone else with the issue.

Thanks,
Chris

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