react-router-dom v6 Routes showing blank page

In react-router-dom@6 the Route components don’t render routed content as children, they use the element prop. Other Route components are the only valid children of a Route in the case of building nested routes. export default function WebRoutes() { return ( <Routes> <Route path=”https://stackoverflow.com/” element={<Welcome />} /> </Routes> ); } Ensure that you have rendered … Read more

Next.js Global CSS cannot be imported from files other than your Custom

Use the built-in Next.js CSS loader (see here) instead of legacy @zeit/next-sass. Replace @zeit/next-sass package with sass. Remove next.config.js. Or do not change CSS loading in it. Move the global CSS as suggested in the error message. Since Next.js 9.2 global CSS must be imported in Custom <App> component. // pages/_app.js import ‘../global-styles/main.scss’ export default … Read more

What is the best way to trigger change or input event in react js

For React 16 and React >=15.6 Setter .value= is not working as we wanted because React library overrides input value setter but we can call the function directly on the input as context. var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, “value”).set; nativeInputValueSetter.call(input, ‘react 16 value’); var ev2 = new Event(‘input’, { bubbles: true}); input.dispatchEvent(ev2); For textarea element you … Read more

You’re importing a component that needs useState. It only works in a Client Component, but none of its parents are marked with “use client”

In the app directory, by default, Next.js uses Server Components, where the JSX gets compiled to “pure HTML” and sent to the browser. Like any traditional Backend with a templating engine, such as Express with EJS, and Laravel with Blade. This is for better performance, as you can read on the doc: Server Components allow … Read more

React functions inside render()

A function in the render method will be created each render which is a slight performance hit. It’s also messy if you put them in the render, which is a much bigger reason, you shouldn’t have to scroll through code in render to see the html output. Always put them on the class instead. For … Read more

Measuring text width/height without rendering

Please check this. is a solution using canvas function get_tex_width(txt, font) { this.element = document.createElement(‘canvas’); this.context = this.element.getContext(“2d”); this.context.font = font; return this.context.measureText(txt).width; } alert(‘Calculated width ‘ + get_tex_width(“Hello World”, “30px Arial”)); alert(“Span text width “+$(“span”).width()); Demo using EDIT The solution using canvas is not the best, each browser deal different canvas size. Here is … Read more

React – How to open PDF file as a href target blank

Place the pdf into a folder in /src. Import it like a component. Set href parameter as the imported pdf and the target = “_blank”. import React, { Component } from ‘react’; import Pdf from ‘../Documents/Document.pdf’; class Download extends Component { render() { return ( <div className = “App”> <a href = {Pdf} target = … Read more

Show/Hide components in ReactJS

I’ve provided a working example that follows your second approach. Updating the component’s state is the preferred way to show/hide children. Given you have this container: <div id=”container”> </div> you can either use modern Javascript (ES6, first example) or classic JavaScript (ES5, second example) to implement the component logic: Show/hide components using ES6 Try this … Read more

Mock inner axios.create()

OK I got it. Here is how I fixed it! I ended up doing without any mocking libraries for axios! Create a mock for axios in src/__mocks__: // src/__mocks__/axios.ts const mockAxios = jest.genMockFromModule(‘axios’) // this is the key to fix the axios.create() undefined error! mockAxios.create = jest.fn(() => mockAxios) export default mockAxios Then in your … Read more