What I Broke – Programming and Web Development

Tag: ReactJS

  • The current operating system is not capable of running this task. That typically means the task was written for Windows only. For example, written for Windows Desktop PowerShell. – AzureFileCopy@4

    Hi everyone, I am currently setting up an azure pipeline to deploy a ReactApp to a Blob storage container. I was a bit surprised when I hit the following error with an Ubuntu pool: I did a quick search in the task lists and couldn’t find anything specifically for Linux. A bit of Googling brought…

  • Fallback image if src doesn’t exist for image tag – ReactJS

    Hey everyone, I have a small list component that I wanted to populate with a custom image based on the entity’s id. Unfortunately, not all entities have an image so some were appearing broken. In order to get around this I used the img tag’s onError attribute in ReactJS. If the image can’t be found…

  • Overwrite Selected Tree View Item Styles – Material UI ReactJS

    Overwrite Selected Tree View Item Styles – Material UI ReactJS

    Hi everyone, Just a quick post on how to overwrite the styles of a selected tree item using material ui and ReactJS: treeItem: { paddingTop: theme.spacing(1), ‘&[aria-selected=”true”][aria-expanded=”true”] > div:nth-of-type(1)’: { backgroundColor: ‘red’, } }, This will make the background color red for ONLY the selected item: Cheers, Chris

  • Missing .tsconfig when converting existing ReactJS project

    Hi everyone, I’ve finally decided to start learning typescript while working on a side project. The plan was to convert the existing project over using the following command: npm install –save typescript @types/node @types/react @types/react-dom @types/jest After restarting the web server I had expected to see a tsconfig.json file that would allow me to setup…

  • React-FontAwesome – Overlay an icon with a number

    Hi everyone, A quick post on how to overlay a number counter on a comment icon with react-fontawesome: This will show up as the following:

  • Simple React-Leaflet Location Picker Setup

    Simple React-Leaflet Location Picker Setup

    Hi everyone, Just thought I’d share a very simple react-leaflet setup in case it’s able to help anyone. Add the css and javascript for leaflet to public > index.html: https://unpkg.com/leaflet@1.5.1/dist/leaflet.js”>https://unpkg.com/leaflet@1.5.1/dist/leaflet.js Install react-leaflet via npm or yarn, also add the dependencies: npm install react-leaflet # npm npm install leaflet react react-dom # npm yarn add react-leaflet…

  • Request Denied – react-geocode

    Hi everyone, I’m currently testing react-geocode but hit a “request denied” error after providing my API key. Error: Server returned status code REQUEST_DENIED The solution was pretty simple thankfully – enable the Geocoding API for your project: https://developers.google.com/maps/documentation/geocoding/get-api-key In my case I was re-using a Google maps key from another project where I’d enabled all…

  • Module not found: Can’t resolve ‘leaflet’ in – react-leaflet error

    Hey everyone, I ran into the following error after installing react-leaflet and attempting to run an example: Module not found: Can’t resolve ‘leaflet’ in ‘…\node_modules\react-leaflet\es’ It turned out I’d simply rushed things and skipped the second step in the documentation: npm install leaflet react react-dom # npm yarn add leaflet react react-dom # Yarn Doco:…

  • Typography Component without a Line Break – Material-UI

    Hey everyone, UPDATE: In new versions you now need to add a display attribute: display=”inline” I’ve been working with Material-UI and ReactJS and had a bit of an issue with a Typography component generating an unwanted link break: To fix it, all I needed was the inline attribute. Once added the text appeared next to…

Create a website or blog at WordPress.com