Tag Archives: JavaScript

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:


   
        
   

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:

https://codesandbox.io/embed/vm4r07mxn5

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 = () => 
Child Component
; const MainComponent = (props) =>
Main component. Child appears below
{props.content}
; class App extends React.Component { render () { return (
<MainComponent content={} />
); } }

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.

https://static.codepen.io/assets/embed/ei.js

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:Userssourcereposfrontendsrc

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:Userssourcereposfrontendsrc

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:

Ticket
 {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

Warning: Can’t call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. – ReactJs

Hi everyone,

This is just a quick post, mostly for my future reference but hopefully it will help someone else out as well. I ran into the following error when invoking a callback in a child component:

Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

This is generally a result of updating the state of a child component after the parent component has hidden it.

e.g. the child component calls a prop function which hides the child component. On the line after the prop function call the child component attempts to set a state variable.

Issue

In my case, it was because I was setting the loading state of a child component to false after performing a successful fetch. Normally this would be fine however I had hidden the child component via the parent component’s prop callback after the successful response was confirmed.

  • (Child Component): Set loading state to true.
  • (Child Component): Call API
  • (Child Component): After retrieving payload, invoke parent component’s prop function and pass it the payload
  • (Parent Component): Process payload. In render, the new payload hides the child component
  • (Child Component): Attempts to set loading state to false Error: can’t change state now that the component is no longer mounted

Solution

To get around it, I had to ensure that I didn’t invoke the parent’s callback (or unload the child) until after the child’s state had been set.

  • (Child Component): Set loading state to true.
  • (Child Component): Call API
  • (Child Component): Retrieve payload, set loading state to false place state change before parent callback is invoked
  • (Child Component): Invoke parent component’s prop function and pass it the payload
  • (Parent Component): Process payload. In render, the new payload hides the child component

Now that the child component state is modified before it is unmounted there isn’t an issue. The easiest way that I’ve found to debug errors like this is to set breakpoints (either hardcoded or in the console) to ensure that everything is being invoked in the expected order.

If you need any more info please let me know!

Thanks,
Chris

VirtualDog Tutorial PluralSight

Hey everyone,

Just taking a quick look at Jasmine with Typescript and found a decent looking tutorial on PluralSight with a sample app called VirtualDog. Attempting to run the following command resulted in an error on Windows 10:

npm run bower-typings

> concurrently “bower install” “typings install”

[0] ‘bower’ is not recognized as an internal or external command,
[0] operable program or batch file.
[1] ‘typings’ is not recognized as an internal or external command,
[1] operable program or batch file.
[1] typings install exited with code 1
[0] bower install exited with code 1

npm ERR! Windows_NT 10.0.15063
npm ERR! argv “C:\Program Files\nodejs\node.exe” “C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js” “run” “bower-typings”
npm ERR! node v6.11.3
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! VitrualDog@0.0.1 bower-typings: `concurrently “bower install” “typings install” `
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the VitrualDog@0.0.1 bower-typings script ‘concurrently “bower install” “typings install” ‘.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the VitrualDog package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! concurrently “bower install” “typings install”
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs VitrualDog
npm ERR! Or if that isn’t available, you can get their info via:
npm ERR! npm owner ls VitrualDog
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! C:UsersChris-PCDesktopTesting Javascript with Jasmine and Typescriptvirtualdog-beginnpm-debug.log

In order to fix it, just run the following command:
npm install -g bower

Thanks to the following link: https://stackoverflow.com/a/37669968/522859

How to Add a FontAwesome Icon using :after

Hey everyone,

Just a quick post on how to add a fontawesome icon using :after:


.fl-cart-product-price:after{
content: 'f00d';
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
margin: 0px 0px 0px 10px;
color: #555;
font-size: 85%;
text-decoration: none;
}

See this stackoverflow post for more info: http://stackoverflow.com/a/18793584/522859