Issue I closed a vim window completely (something I rarely do) and when I opened it back up my syntax highlighting for jsx files stopped. I had some other windows open and inside these the syntax highlighting for jsx was
Continue readingTag: jsx
Why Atom does not accept the syntax of JSX file?
Issue I have here this expression: <QRCode value={`${formattedBchAddress}`} style={{ alignSelf: "center" }} /> and Atom does not accept it, though it seems syntactically it is correct. Solution I‘m answering on the assumption that you did not install a package that
Continue readingHow to make Sublime 3 open .js files with JSX syntax
Issue I’m using Sublime 3 on MacOS 10.15.7 and I’m working on a React project. I have a package installed for JSX syntax highlighting, and it works fine if I manually set it after opening the file. By default, it
Continue readingIndesign extended Script unable to create a file in Mac OS 10.16
Issue I have a jsx script which i use for indesign scripting. The function below is used to write to a file. It works perfectly in windows. In mac it is not able to create not read the file from
Continue readingreact js : children style doesn't show
Issue I tried to create a component ‘Card’ and use it like a container. the code work well without ‘card’. when I tried to add it the ‘Card.css’ and expense-item in ExpenseItem.css doesn’t work this is ‘ExpenseItem.js’: import Card from
Continue readingFailing to map property values in React.js and Typescript
Issue I’m quite new to React and Typescript. I do have an object that has property values as arrays.I can get the object’s value through the below logic. let cityObj = { "Harare":[ { "released_on":"2007-11-08T00:00:00", "slug":"0985" }, { "released_on":"2007-11-08T00:00:00", "slug":"2346"
Continue readingTypeScript Type for HTML Element Tag
Issue I am working on a TypeScript + React project. For a component, I want to use the polymorphic as prop. However, I want to restrict it to HTML tags so it will not accept ReactNodes or JSX Elements. But
Continue readingHow can I declare/ignore a missing JSX type?
Issue I would like to use the SVG use element in a .tsx file: <mask id="mask1"> <use … /> </mask> I’m transpiling this to React calls directly. However, I keep receiving the following error: Property ‘use’ does not exist on
Continue readingThe correct styling is applied despite the targeting are different in JSX and CSS files
Issue Currently I have the following code: FormInput.jsx: import ‘./FormInput.scss’; const FormInput = ({ label, …otherProps} ) => { const { value } = otherProps; return ( <div className="group"> <input className="formInput" {…otherProps} /> {label && ( <label className={`${value.length ? ‘shrink’
Continue readingCan you modify NextJS mount element or add classes to __next div?
Issue Long story short is I’m working on a project where I want to have the content "fill" the vertical space below the static header. I’ve done this in React with tailwind like this: <body class="flex flex-col h-screen text-gray-600 work-sans
Continue readingName of this switch operator syntax
Issue I am constantly finding this sort of switch statement in a codebase and not being able to find documentation about it anywhere. Does anyone know the name of this syntax? import React from ‘react’ enum Options { FirstOption =
Continue readingWhy my javaScript code in not working with my react Component?
Issue I cannot add client-side javaScript into my React App component (LeftSection.js). Can anyone please tell me what is wrong with my code? The one possible answer is that I am adding my javaScript code before JSX (HTML) which does
Continue readingWhen i set a width the child element disappear
Issue I have a div called a-text-box. And i want to display an arrow after a section. I have 4 sections. Section = 2 words. But when i set a width for my a-text-box, the arrow disappears.I dont really know
Continue readingTrying to switch between local and public webpage while looping through data
Issue At the moment, I am trying to list projects on a website in a grid. Some of them link to another page on the site and others link to another domain page. At the moment I am using React-Router’s
Continue readinghow to write good anchors in react.js
Issue I had code in react js but the are problem to write anchor with href . form example this below code import React from "react"; function Browser() { return ( <div> <section className="flex bg-gray-100 py-16 px-4" id="browse-the-room"> <div className="container
Continue readingHow to check whether all the checkboxes are checked in Reactjs?
Issue I am new to react and I got a scenario where I have multiple checkboxes on my form. I want the user to check all the checkboxes only then enable the submit button on the form. On Load, the
Continue readingDiv does not follow the mouse
Issue In the following code, I hope my div will follow my mouse in red background but it does not, what’s the reason for that? CSS .dropdown1 { position: absolute; left: 150px; top: 10px; background: #2b4557; padding: 4px 8px; font-size:
Continue readingProblem with Visual Studio Code using "react-jsx" as jsx value with create-react-app
Issue I’m struggling with following "error" in VSCode : Argument for ‘–jsx’ option must be: ‘preserve’, ‘react-native’, ‘react’ Hence, react-scripts (create-react-app) automatically sets the jsx key to react-jsx value, when react value seems to work. Actually, the code works perfectly
Continue readingProblem with Visual Studio Code using "react-jsx" as jsx value with create-react-app
Issue I’m struggling with following "error" in VSCode : Argument for ‘–jsx’ option must be: ‘preserve’, ‘react-native’, ‘react’ Hence, react-scripts (create-react-app) automatically sets the jsx key to react-jsx value, when react value seems to work. Actually, the code works perfectly
Continue readingGetting active background color using useRef
Issue Given the css .App { font-family: sans-serif; text-align: center; } .App:hover { background-color: red; } and jsx code import "./styles.css"; import { useRef } from "react"; export default function App() { const r = useRef(); const handleClick = ()
Continue readingdynamic Button class does not update after the array change
Issue So I have an array of objects. I iterate through this array and create a button for each object. When a button is pressed that object of the button pressed has a value "active" that will be set to
Continue readingInferred Generic Type on React Component
Issue Typescript is pretty good about inferred generic types. For example, if I write the following code: class AwesomeClass<T> { constructor(public val: T) { // … } public getVal(): T { return this.val; } } const inst = new AwesomeClass(“Hello
Continue readingTSX file can't render imported React Component
Issue When I import the Day component into Week component (both are .tsx files), I get the following error: Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Continue readingFit parent height for Table in Material UI?
Issue I want the table height to fit the parent’s available height. Ideally, I want: The footer to always be docked at the bottom of the parent container. If the table contains a few rows, the footer should remain docked
Continue readingHow do I get this flex container to wrap in React?
Issue I’m trying to make a list of cards with images and a short description but I can’t figure out the CSS here. This is iterating through JSON data. I can’t get the flexbox to wrap to the next line.
Continue readingCannot use JSX unless the '–jsx' flag is provided
Issue I have looked around a bit for a solution to this problem. All of them suggest adding “jsx”: “react” to your tsconfig.json file. Which I have done. Another one was to add “include: []”, which I have also done.
Continue readingtrigger animation whenever the <img src={value} /> src value changes
Issue I’m using React to Create an img element that changes its src attribute after specific time with setInterval function based on an array that contains many images. so the thing is i want to make an animation whenever the
Continue readingCreate dynamic svg icons component in ReactJs
Issue I want to create a React component for my SVG icons but if I use this component several times (with different props) in another component, it always renders the same icon. My icon.js component: import { ReactComponent as ArrowDown}
Continue readingCan't load image from svg on React.js
Issue The Issue I was working to load image from svg(Scalable Vector Graphics) file on React. I tried a few solution ways and I didn’t received any result. Those are solutions that have been tried: Solution – 1 <img src="../../assets/icons/branch.svg"
Continue readingCreate dynamic svg icons component in ReactJs
Issue I want to create a React component for my SVG icons but if I use this component several times (with different props) in another component, it always renders the same icon. My icon.js component: import { ReactComponent as ArrowDown}
Continue readingCreate dynamic svg icons component in ReactJs
Issue I want to create a React component for my SVG icons but if I use this component several times (with different props) in another component, it always renders the same icon. My icon.js component: import { ReactComponent as ArrowDown}
Continue readingtrigger animation whenever the <img src={value} /> src value changes
Issue I’m using React to Create an img element that changes its src attribute after specific time with setInterval function based on an array that contains many images. so the thing is i want to make an animation whenever the
Continue readingtrigger animation whenever the <img src={value} /> src value changes
Issue I’m using React to Create an img element that changes its src attribute after specific time with setInterval function based on an array that contains many images. so the thing is i want to make an animation whenever the
Continue readingMouse Out of Element and Mouse Into Another Element Does Not Reset State
Issue Code: https://codesandbox.io/s/objective-darwin-w0i5pk?file=/src/App.js Description: This is just 4 gray squares that each get their own shade of gray. I want to change the background color of each square when the user hovers over each, but I want the hover color
Continue readingMouse Out of Element and Mouse Into Another Element Does Not Reset State
Issue Code: https://codesandbox.io/s/objective-darwin-w0i5pk?file=/src/App.js Description: This is just 4 gray squares that each get their own shade of gray. I want to change the background color of each square when the user hovers over each, but I want the hover color
Continue readingReact: Separate array of timestamps into days
Issue My API (NotesData) returns an array of objects where one of the key/value pairs is a PostgreSQL timestamp formatted like 2022-04-12T19:25:39.950747+00:00. I am creating a timeline of notes, where each object in the array is its own note with
Continue readingReact: Separate array of timestamps into days
Issue My API (NotesData) returns an array of objects where one of the key/value pairs is a PostgreSQL timestamp formatted like 2022-04-12T19:25:39.950747+00:00. I am creating a timeline of notes, where each object in the array is its own note with
Continue readingautomatically rendering/putting email and passwords whenever page reloads in JSX
Issue While writing autocomplete in text field of email and password in login page, it is rendering or automatically putting email and passwords whenever page reloads I haven’t added functionality yet in login page. Only JSX part has been done
Continue readingautomatically rendering/putting email and passwords whenever page reloads in JSX
Issue While writing autocomplete in text field of email and password in login page, it is rendering or automatically putting email and passwords whenever page reloads I haven’t added functionality yet in login page. Only JSX part has been done
Continue readinghow to display none of the grid.col part when page is loading using react
Issue The form starting from GRID.COL should be hidden during the page loading once the user clicks the plus button it should show in the page. I am trying not to use css display none option instead trying to do
Continue readinghtml strings array convert to JSX
Issue `import React from ‘react’ export default function Quiz(props){ // generate random index without duplicates function generateRandomIndex(){ const randomNumArr=[] for (var a = [0, 1, 2, 3], i = a.length; i–; ) { var random = a.splice(Math.floor(Math.random() * (i +
Continue readingUnable to install @mui/x-data-grid in react
Issue npm install @mui/x-data-grid throws an error npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: highradius@0.1.0 npm ERR! Found: react@18.0.0 npm ERR! node_modules/react npm ERR! react@"^18.0.0" from the root project
Continue readingHow can I use forwardRef in React Component?
Issue Can someone help me? I’m creating a component inside React, and I want to make it more accessible using forwardRef. In my case, I’m making a button and I’m using the button’s properties, and a few more I’ve done
Continue readingHow to vertical align links and image inside <ul> <li>
Issue I am trying to build a menu, this is the html <header className="header"> <div className="main-menu"> <ul> <li className="main-menu__app-menu"><Link href="#"><a>Link A</a></Link></li> <li className="main-menu__app-menu"><Link href="#"><a>Link B</a></Link></li> <li className="main-menu__app-menu"><Link href="#"><a>Link C</a></Link></li> <li className="main-menu__user-menu"><Link href="#"><a>Link D</a></Link></li> <li className="main-menu__user-menu"><Link href="#"><a>Link E</a></Link></li> <li className="main-menu__user-menu"> <img
Continue readingCreating a ZxZ table in React/JSX using for loops
Issue I’m trying to create a 5×5 table where each cell is a button, using React/JSX. The below throws an error in SandBox: import "./styles.css"; import React from "react"; const makeCell = () => { return ( <td> <button/> </td>
Continue readingWhy is :read-only CSS pseudo-class being applied on this checkbox?
Issue I have the following SCSS code: input[type="checkbox"] { … &:read-only, &[readonly] { cursor: default; filter: grayscale(1); } } That is being applied to <input type="checkbox" id="checkbox" onChange={this.rememberMe} /> Following MDN: :read-only documentation: it will select any element that cannot
Continue readingMedia query syntax for Reactjs
Issue How do I do the following CSS media query in Reactjs? .heading { text-align: right; /* media queries */ @media (max-width: 767px) { text-align: center; } @media (max-width: 400px) { text-align: left; } } I tried the following but
Continue readingAdding a line break dynamically inside a JSX expression
Issue So i’m making a React app that fetches lyrics of songs from an API The API gives me a lyrics_body that is a string and i’m using that to display the lyrics on the page, problem is, that it’s
Continue readingUncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object
Issue I am getting this error: Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. This is my code: var React = require(‘react’) var ReactDOM =
Continue readingTrying to use var as img src in JSX
Issue I’m working on a react project and I have a situation where I need the src attribute for an img tag to be a variable. The relevant parts of the code look something like this: import React, { useState,
Continue readingFixed navbar hiding page content
Issue The navbar is fixed, so when I move to /team. The content of page hides behind the navbar. I tried adding margins but still does not work. Is it possible to add the team component content after the navbar?
Continue readingHow to define css variables in style attribute in React and typescript
Issue I want to define jsx like this: <table style={{‘–length’: array.lenght}}> <tbody> <tr>{array}</tr> </tbody> </table> and I use –length in CSS, I also have cells that have –count that shows count using CSS pseudo selector (using the counter hack). but
Continue readingLimiting the npm react-date-picker to show only last 30 days from today dynamically in react
Issue Show only last 30 days from today in npm react-date-picker dynamically in react. Future dates from tomorrow should be disabled. import DatePicker from "react-date-picker"; <DatePicker maxDate={new Date()} /> Solution What exactly is the question? You can create a date
Continue reading