React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
React: Append to an object in state
10 Aug, 2024
In React, appending to an object in the state involves updating the state with a new object that includes the existing properties and the new ones. This pattern ensures that you immutably update the...
React: Append to array in state
7 Oct, 2023
The spread operator (...) is a versatile tool in JavaScript that simplifies common operations like copying, merging, and adding elements to arrays and objects. It's widely used in modern JavaScript...
useRef hook in React
27 Jul, 2022
The useRef Hook allows you to persist values between renders. First example would be to use the hook to update values without causing the component to re-render.
useEffect hook in React
26 Jul, 2022
React hook useEffect is used in functional components to implement life-cycle callbacks. The Effect Hook lets you perform side effects in function components, but some people argue that DOM events...
useState hook in React
25 Jul, 2022
useState is a hook what you use in a React function to create a state variable. This is not used if you use React class components. useState has tricks you must know about.
Show Logo image on AppBar in Material UI
18 Jun, 2022
Most sites or apps show a logo on the left corner of the screen. In Material ui there is AppBar component. The official examples don't have this snippet. Link to the official documentation: https://...
React Semantic UI: Simple drag and drop file field
23 Nov, 2019
An example of a simple dropzone using Semantic UI. Is achieved by using "react-dropzone", which does not provide theming.
React: Address Search using Google Places API
23 Nov, 2019
This snippet shows you how you can use google places api in react to create address autocomplete dropdown. There are other service providers than google, but google supports business names in...
React: reset state when you click current menu router
19 Nov, 2019
Use this snippet when you have created a menu using BrowserRouter from 'react-router-dom' and you need to reset the state when you click on the current menu item (same url path as you are currently...
React file upload using FormData and fetch.
13 Nov, 2019
You can create input fields or use libraries like react-dropzone in React very easily. You still need to get the files from the form and send them to backend for saving. This snippet is the upload...
Append a file to FormData from file input in React ES6
8 Oct, 2019
You can use FormData to send form data using AJAX, including files. This is for you if you have to manually add files, you don't take them from a form, for some reason. This snippet is a react...
Get filename from file type input in React ES6
2 Oct, 2019
Get file name from file input and save it into state. You might need to use this when you hide your html file input and use button or some other element to trigger the click on the file input.
Get FormData using ref in React ES6
1 Oct, 2019
Get form data using ref attribute on form tag. This could be useful in some cases. The error that I was tackling before I found this solution: "Uncaught TypeError: Failed to construct 'FormData':...
Simple file field with React Semantic UI
24 Sep, 2019
Snippet of a simple file field with original Semantic UI for React. Semantic UI is still missing a file field component. Other solution would be to use react-dropzone for creating a dropzone.
React, Semantic UI and DataTables.net
27 Aug, 2019
Working example of Semantic UI variation of "DataTables.net" on ES6 variation of React.
ERROR in Entry module not found: Error: Can't resolve './src' in '/var/www/your-project'
8 Jul, 2019
When you get this error from your webpack project "ERROR in Entry module not found: Error: Can't resolve './src' in '/var/www/your-project'", you have probably used application directory different...
React ES6: Styled Components
6 Oct, 2018
Styled components are the best way to give some visual aid to your components. The heavy lifting should be done by a library, it can be either material design, bootstrap, semantic, etc... To adjust...
React: Warning: Failed context type: The context `router` is marked as required in `Link`, but its value is `undefined`
25 Jul, 2017
Testing React components with Jest I got an error: "Warning: Failed context type: The context `router` is marked as required in `Link`, but its value is `undefined`.". I am using Link from react-...
React: Wait for full render in snapshot testing
5 May, 2017
If you use full render not shallow in your tests, your tests might be rendered before the actual component and its subcomponents are fully loaded. In that case you need to delay the output, while...