Questions tagged [jsx]

For questions about the JSX syntax used by React.js, Vue, and other front-end JavaScript frameworks that allows inline XML literals to be used in JavaScript to describe HTML elements. If your question is about Adobe's extended implementation of JavaScript (ExtendScript) which is at least five years older than React.js, use the [ExtendScript] tag instead.

Filter by
Sorted by
Tagged with
0 votes
0 answers
22 views

Why does the console.log is not working in Remix js?

I am new to Remix js and i don't find the solution to my basic problem. I'm trying to do a burger menu and for that, i created a console.log so that i can activate it or not. Here's what it looks like ...
YEAHH's user avatar
  • 1
0 votes
0 answers
9 views

@pmmmwh/react-refresh-webpack-plugin/loader error when importing react component from submodule

I have a parent repository developed with React, and I have a child Sub Module inside of it(which is developed by react too) and both of them are ceeted with CRA. The project folder structure is ...
Aya Abdessalem's user avatar
0 votes
0 answers
27 views

TypeScript Parsing Error with JSX Element in Object - React with TypeScript

I'm working on a React project with TypeScript and encountering a parsing error when trying to include a JSX element (an icon from the React-Icons library) within an object. This object is part of a ...
viko randazo's user avatar
0 votes
0 answers
9 views

Qwik event that triggers when the element is initialized

I want to get an element. The quickest way to do that seems to be through event.target. So I want an event that is triggered as soon as an element is initialized, and then never again Something like ...
hufsihfsuiafhashfuiashf's user avatar
1 vote
0 answers
28 views

repeating print every 10 minutes in illustrator

I have some small printers which need to print every 10 or 15 minutes to decrease damage of printers. so, I need a script (jsx or vbs) to send a command to illustrator to print every 10 minutes. Is ...
ali mohammadi khah's user avatar
0 votes
2 answers
73 views

Trying to pass props in React using React Router - saying the value is null

I am trying to pass props in order to use the React Router as part of a project I am in. I keep getting the error from this code that links is null, and I am not sure why - Header component: [![header]...
Mleblanc94's user avatar
0 votes
0 answers
21 views

Unhandled Runtime Error -- TypeError: nextCreate is not a function --- "Not able to add rich-text-editor to webpage"

Firstly I create react project then I installed jodit-react. When I run a program its showing error "self is not defined". then I add below code to my page.js. const JoditEditor = dynamic(() ...
Sagar's user avatar
  • 1
0 votes
1 answer
19 views

Is it possible to interrupt the map and put another element in the middle?

I'm making a navbar in Nextjs, and I want to put a different element in the middle of the map. {navLinks.map((link, index) => ( <li key={index}> <...
riccardoboe's user avatar
-2 votes
3 answers
49 views

Unable to write in TextInput (JavaScript)

For reasons unknown my text input wont let me update or even type into the text box. I swear I was able to write into it earlier but now clicking on it does nothing except producing the black border. ...
Andrew Vonderhaar's user avatar
0 votes
1 answer
36 views

My createContext() wont work with @react-native-firebase/app

I created a useContext to access my react-native-firebase/auth gloabally. Im runnning the app using expo run:ios I've done pod update and no errors. None of the components are working properly anymore ...
Demetris's user avatar
0 votes
0 answers
23 views

How to use JSX syntax outside of a React component? [closed]

I am using react Icons for adding icons in my UI. Here i make a separate .js file to store things and directly map them in component file. But its giving Syntax error in .js file. import { ...
Pankaj Asiwal's user avatar
0 votes
1 answer
30 views

Can I Implement a Regular Drop-Down Menu/ Style Inside a MUI Select Component?

I am currently trying to implement the default drop-down menu appearance in my MUI Select Component. Desired menu: My Current Select Component: I have tried wrapping my select element tag inside my ...
Jake Matthews's user avatar
1 vote
1 answer
42 views

Updating Navbar Links in React on "Become a Seller" Click

I am facing a challenge related to updating navbar links dynamically. I want the navbar to display "Logo," "Seller Home," "About," and "Sell a Product" links ...
prajitha k's user avatar
1 vote
1 answer
41 views

How to dynamically change displayed content(with state) without violating reacts hookuse rules?

I am implementing the client side for a tic-tac-toe web game. I have 2 typescript files: TicTacToe.tsx: Main display, contains a switch statement, that depending on state displays the input or the ...
Bela's user avatar
  • 13
0 votes
1 answer
27 views

Problems to edit an object in react with a form

I have a component in react with a form to edit a profile user. The first render, all the info is printed, but when I'm trying to edit it, I'm having problems with a property that it's an object. If ...
portix's user avatar
  • 1
-1 votes
0 answers
27 views

I want to make in React Restful API with Laravel a view details page with URL

I have a list of project. With a link for each project I want to access project details: src/components/AllCourses/AllCourses.jsx: <Link className="courseViewMore float-left" to={"/...
Stefania Stefania's user avatar
0 votes
1 answer
37 views

Text displays multiple times but when I try this, it doesnt display at all

The text kept displaying multiple times but when I thought about a way of making it only display one it didnt display at all. I got a variable and set it to 0, There is a timer that sets it to 0 every ...
Ifesol's user avatar
  • 15
0 votes
1 answer
17 views

"touchmove" event not working as expected in React

I am building an app in NextJS. I am trying to create a window manager in which you can drag and resize panels. Everything works well on desktop, but on mobile, the event listeners are not behaving I ...
itaypoo's user avatar
1 vote
0 answers
41 views

How to conditionally modify react-orgchart's orgChart CSS classes?

I'm making an organization chart that has collapsible nodes functionalities. These are the CSS classes that control the lines in the chart connecting the nodes: #orgChart .orgNodeChildGroup ....
Yajax's user avatar
  • 73
0 votes
1 answer
35 views

Animation Doesn't Work Unless I Save The File

The buttons are supposed to be a bubble animation when hovered over. But they stay in place unless I save the .jsx file in VS Code. Then they work fine until I refresh the page and the buttons have no ...
42Zach's user avatar
  • 3
0 votes
0 answers
56 views

Transforming from .gltf to .jsx is not working

I am developing a react app with threejs. I wanted to use 3d object in my project, therefore, I followed https://github.com/CesiumGS/gltf-pipeline and implemented npm install -g gltf-pipeline then ...
perfectionist1's user avatar
0 votes
0 answers
28 views

Transform JSX syntax on the server in a .NET app

I am looking for a way to transform JSX code in a .NET application. For example, assume we have the following JSX file (example.jsx): <div class="someClass"> <span>{props....
Ivaylo Slavov's user avatar
1 vote
1 answer
27 views

style = background-image url quotation turns into &quot;

I am trying to make a catalog component where I can use the image, title, and description multiple time. This is the component code so far import React from "react"; import '../pages/UI.css';...
kuritzu's user avatar
  • 21
0 votes
0 answers
17 views

Getting Mime Error when deploying using AWS Amplify

I am getting a mime error when I have finally successfully deployed my website via Amplify. error Failed to load module script: Expected a JavaScript module script but the server responded with a ...
mrsWeeAct's user avatar
1 vote
1 answer
28 views

In Vue can I use html elements like <href> in data?

I have a lot of data strings like this: data(){ return(){ {name:"ex",title:"exTitle",desc:"exDesc exDesc ....."}, {name:"ex2",title:&...
Abdullah Semih Gür's user avatar
-2 votes
3 answers
95 views

What is the meaning of {' ~ '} in jsx

Would someone be able to help me with an explanation of {' ~ '} in the below context for this jsx file? My file: Post.jsx import React from 'react'; import User from './User'; import Timestamp from './...
commandoChicken's user avatar
0 votes
1 answer
29 views

Can i delay an style object to appear for certain time using setTimeout in react?

i want to make the style to like delay for certain time before it appear in react, to put more simply like, when i hit the toggle which will change the height of my element (openNavbar) after a ...
wcosmic's user avatar
0 votes
0 answers
11 views

Qwik JS: child components when looping through does not react to state changes properly

I have the following code as a route: export const EditMembers = component$(() => { const t = useTranslate(); const group = useGroup(); const groupMembers = useGroupMembers(); const members ...
Talha Bayansar's user avatar
0 votes
1 answer
50 views

Update array using dispatch and avoid infinite loops

I am using JSX to build a function that reads user's profile and updates it when click is performed. The userProfiles should contain user profiles and has some initial user profile, it should be ...
maoyi's user avatar
  • 433
1 vote
0 answers
26 views

Styles at media quary applies only partially

I am trying to make mobile navigation but my styles at medea applying only partially, to be precisely it applies background color but not flex styles. JSX import classes from "./Header.module....
Timur's user avatar
  • 23
0 votes
1 answer
20 views

state as an argument to access an object?

(i'm new to react btw) So i'm trying to make a code that: Reads the value of two select boxes and an input Uses the value of the selects to read a Javascript object Multiplies the value of the input ...
Human0's user avatar
  • 3
-1 votes
1 answer
28 views

how to change :class in html tag to jsx

<html :class="{ 'theme-dark': dark }" x-data="data()" lang="en"> Forgot password - Windmill Dashboard <img aria-hidden="true" class="object-...
Mohankumar R's user avatar
1 vote
2 answers
74 views

How can I solve infinite loop in my code?

I have a problem with infinite loop in my code. I am trying set icons to my weather forecast list. But I am getting "Too many re-renders. React limits the number of renders to prevent an infinite ...
Fatih Demirbaş's user avatar
1 vote
2 answers
89 views

Conditional rendering to one button in react

I have array that I'm mapping over to create buttons for my navbar. However I want a button with a specific name (Profile) to show a dropdown when clicked. Currently with the below code, no dropdown ...
pickeC01's user avatar
1 vote
0 answers
31 views

Is it poor practice to set state within JSX?

I'm working on showing a series of images with next and previous arrows. I don't want the next and previous arrows to show until the image loads. I have a state variable to track when the image loads....
colecolecole123's user avatar
0 votes
2 answers
54 views

How to render dropdown based on an API call

I have a contacts variable that is set by calling an API. This is all done in an immediately invoked function expression (async () => {})();. I have to get a token to access the Microsoft Graph API....
tomtomdam's user avatar
0 votes
0 answers
10 views

How to extend intrinsic element with also overriding field type?

I have custom component Button I want to be able pass to it value field ReactElement. TS Playground interface ButtonProps extends Omit<JSX.IntrinsicElements["button"], "value"&...
Sonny D's user avatar
  • 905
1 vote
1 answer
48 views

How to render a dropdown based on an API call

I was wondering how to render a dropdown after populating it with an API call, in an Outlook Add-in. It does not show on the screen for me. Basic example: const App () => { let contactDropdown =...
tomtomdam's user avatar
0 votes
0 answers
25 views

Movie API, passing data through?

I'm currently learning React and wanted to do a movie website project with a ticket system. I want it so that when I click the ticket icon it will redirect me to a ticket page. However, I don't know ...
bamb1's user avatar
  • 75
1 vote
1 answer
36 views

Ways to improve Vue JSX support

While using JSX in vue we have to create some dedicated file while in React we could use it on inline JS. Is there a way to reproduce it using vue ? content of .babelrc : { "presets": [ ...
YoungDev's user avatar
0 votes
2 answers
45 views

How to list results using state when clicking a button

I am trying to write a component that lists a set of results when clicking the Find button. However when I click the Find button, the results state variable is not being reset when I call setResults([]...
tomtomdam's user avatar
0 votes
0 answers
18 views

react js placing context menu inside svg elements not rendering

I'm new to react js and i'm doing a project to display floor maps using svgs. I added context menu using React Contextmenu library. when I place the context menu it stops displaying the rectangles of ...
jan411's user avatar
  • 3
-1 votes
0 answers
68 views

Scroll Area & Separator wont work From Shadcn and React

I am not using Typescript for this project due to some limitations with others but i know we should be using typescript but we just cant as of now. We are using Shadcn for some UI elements and ...
David Verduzco's user avatar
1 vote
0 answers
16 views

App Intro Slider with checkable inputs on pages - calling actions from parent, sending events to childrens

I'm struggling with this problem from two weeks and I'm here to search help. I cannot figure out how to make a Horizontal Page Slider in ReactNative, in order to avoid useless rerender of all the ...
Martinocom's user avatar
0 votes
2 answers
32 views

Why am I getting a Blank Page but React is compiling successfully?

I don't understand why I get a blank page when I run npm start. I am trying to have the and tags to render. Here is the code: index.js import React from 'react'; import ReactDOM from 'react-dom/...
cm hayes's user avatar
0 votes
0 answers
14 views

jsx script in which information from after effects is leaked

I am an intermediate editor, so I've been studying after effects for about three months now, and I've begun downloading present packs, cc, project files, and so on. I also recently downloaded a script,...
Sujilbabu cs's user avatar
0 votes
1 answer
19 views

JSX not why top one doesnt work but bottom does

I'm working on JSX and I a, using ternary operators and I don't get why one version works and the other doesn't. If you could explain that would help a lot. const container = document.getElementById(&...
Philip Curtis's user avatar
0 votes
0 answers
36 views

difference between jsx and js extention [duplicate]

everyone is saying that JSX helps us to write HTML in JavaScript in React. However, JS extension also does the same so what is the real difference between JS and JSX extensions in React 18?
Tariq Khan's user avatar
0 votes
0 answers
11 views

Adobe After Effect Extension [Image Preview Error]

i'm currently making my first after effect extension with nodejs/jsx. And i have a problem during rendering image. enter image description here <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
seka's user avatar
  • 1
0 votes
0 answers
34 views

Pass a method to another React component (not child)

I have 2 DIVs: "container-1" and "container-2" I have 2 components: "Button" and "Board" Button must be rendered to "container-1" Board must be ...
serhiyiv's user avatar
  • 183

1
2 3 4 5
183