Stack Overflow
Stack Overflow

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.

JSX syntax is used by , , and other front-end JavaScript frameworks that allows inline XML literals to be used in JavaScript to describe HTML elements.

Resources

8973 questions
33
votes
4 answers

Set component's props dynamically

I need to set component's props after it is stored in a variable, here is pseudo code: render(){ let items = [{title:'hello'}, {title:'world'}]; let component = false; switch (id) { case 1: component = …
bukowski
  • 1,893
  • 7
  • 34
  • 54
33
votes
7 answers

How can I write an else if structure using React (JSX) - the ternary is not expressive enough

I want to write the equivalent in react: if (this.props.conditionA) { Condition A } else if (this.props.conditionB) { Condition B } else { Neither } So maybe render() { return (
…
Henry
  • 6,502
  • 2
  • 24
  • 30
32
votes
6 answers

TypeScript 3: JSX element type 'Component' does not have any construct or call signatures. [2604]

I'm trying to pass a variable of type React.Component (or React.FunctionComponent) into a Route, like this: import React from 'react'; import { Route } from 'react-router-dom'; type PrivateRouteProps = { component: React.Component |…
jacobsowles
  • 2,863
  • 6
  • 35
  • 54
32
votes
5 answers

Next.js: How to change css of root div __next on specific page?

I want to change div which the id is __next on login page. But when I add style in jsx, it seems change to another div with id #__next.jsx-2357705899, .main.jsx-2357705899 while dom mounts to page. How could I change css of __next div when login…
Rukeith
  • 665
  • 1
  • 8
  • 22
32
votes
1 answer

React performance implications of long key value on component

How does length of a string applied to some component collection created from some set of data like this: {this.state.list.map(item => { const url = item.url; return ( ); })} Are there some…
zmii
  • 4,123
  • 3
  • 40
  • 64
31
votes
6 answers

Cannot resolve symbol 'Routes'

I am importing Routes the following way import {Routes, Route, BrowserRouter} from 'react-router-dom' My package JSON is "react-router-dom": "^6.0.2", I am using Pycharm. npm list react-router-dom returns -- react-router-dom@6.0.2 Why is this…
Joseph Adam
  • 1,341
  • 3
  • 21
  • 47
31
votes
4 answers

Center Image React Native Loading Screen

Background I have an image placed on a screen meant to show when the screen loads other content. I want to center the image so it is always center on all devices. Problem Currently the image shows up top center. I would like it to be aligned…
wuno
  • 9,547
  • 19
  • 96
  • 180
30
votes
1 answer

TS Config JSX: ReactJSX vs React

While using Typescript with React we have to specify jsx in compilerOptions in tsconfig.json file. It has preserve, react, react-native, react-jsx etc. as allowed values. { "compilerOptions": { "jsx": "react-jsx" | "react" | "react-native" |…
Rahul Yadav
  • 2,627
  • 5
  • 30
  • 52
30
votes
4 answers

support for the experimental 'jsx' isn't currently enabled

So I have endlessly searched the web to fix this issue. "support for the experimental 'jsx' isn't currently enabled... Add @babel/preset-react to the 'presets' section of your Babel config to enable transformation. If you want to leave it as-is, add…
meh
  • 401
  • 1
  • 4
  • 5
30
votes
6 answers

React, how to access the DOM element in my render function from the same component

I'm wondering what's the best practice for accessing the DOM elements inside my render function from the same component. Note that I will be rendering this component multiple times on a page. e.g. var TodoItem = React.createClass({ ... …
wonghenry
  • 575
  • 2
  • 6
  • 18
30
votes
3 answers

How to model a button with icons in react-native

I'm using react-native-icons package to include icons with buttons. They have a sample code listed in example folder. I'm trying to achieve onPress on View but turns out react-native doesn't have onPress function for component. I tried using…
Piyush Chauhan
  • 1,523
  • 2
  • 24
  • 37
29
votes
1 answer

what is the use of 'jsx' property in tsconfig.json

I had generated tsconfig.json with tsc --init, and then I wrote react code in a .tsx file and got the error Cannot use JSX unless the '--jsx' flag is provided I stumbled upon this jsx setting of tsconfig it has jsx in commented mode as // "jsx":…
Akshay Vijay Jain
  • 13,461
  • 8
  • 60
  • 73
29
votes
5 answers

How to place a text over image in react native?

How to vertically place a text over image in react native? I found this doc. But i can't do like that , I can't add text tag as a child component of Image tag.I've tried like the below.
Linu Sherin
  • 1,712
  • 7
  • 38
  • 88
29
votes
2 answers

Idiomatic way to append an element in JSX

Given the following JSX: const elems =

hello

world

If I want to add another element to the end, is there a more idiomatic way than doing: const moreElems =
{elems}

additional

Maybe something…
Nick Heiner
  • 119,074
  • 188
  • 476
  • 699
27
votes
7 answers

External link is not working in Next.js when you want to use Link component

I was very surprised that a simple Link component is not working in Next.js when you want to use an external URL and HTML Button tag inside it. Below you can see how I tried to solve the problem: Approach number 1:
Mario Boss
  • 1,784
  • 3
  • 20
  • 43
1 2 3
…
99 100