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
88
votes
4 answers

React Native styling with conditional

I've recently started learning React Native. Currently, I'm working on altering the TextInput style when an error occurs. How could I refine my code to make it look more polished?
Kelvin
  • 2,218
  • 4
  • 22
  • 41
88
votes
5 answers

How can I attach to a stateless component's ref in React?

I am looking to create a stateless component who's input element can be validated by the parent component. In my example below, I am running into a problem where the input ref is never being assigned to the parent's private _emailAddress…
drewwyatt
  • 5,989
  • 15
  • 60
  • 106
87
votes
20 answers

How to comment JSX code out in .js files in VSCode?

Unlike in webstorm, I'm unable to comment JSX code out in .js files in the Visual Studio Code.
Y.H. Eng
  • 871
  • 1
  • 7
  • 4
84
votes
9 answers

Problem with Visual Studio Code using "react-jsx" as jsx value with create-react-app

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…
Denis Lebon
  • 953
  • 1
  • 7
  • 13
84
votes
17 answers

Warning: Prop `className` did not match. when using styled components with semantic-ui-react

I use this code to margin my Button from top: const makeTopMargin = (elem) => { return styled(elem)` && { margin-top: 1em !important; } `; } const MarginButton = makeTopMargin(Button); and whenever i use…
Talha Talip Açıkgöz
  • 1,821
  • 4
  • 15
  • 28
81
votes
13 answers

React: Expected an assignment or function call and instead saw an expression

I am trying to fix this lint error at line const def = (props) => { in following sample code. const propTypes = { prop1: PropTypes.string, prop2: PropTypes.string, prop3: PropTypes.string, prop4: PropTypes.string, prop5: PropTypes.string, } const…
User7354632781
  • 2,174
  • 9
  • 31
  • 54
76
votes
5 answers

How to concatenate two JSX fragment or variables or string and component (in Reactjs)?

I know JSX can be very misleading because it looks like strings and it is not, thus the "string" term in the question, even if we are not really manipulating strings. Here is a code example (wrong, obviously): let line =
Sephy
  • 50,022
  • 30
  • 123
  • 131
71
votes
11 answers

Create-React-App build - "Uncaught SyntaxError: Unexpected token <"

I realize this question has been asked multiple times but nothing has worked for me... I'm trying to create a static build of a create-react-app project but I'm getting the following errors: Uncaught SyntaxError: Unexpected token < …
SuperCodeBrah
  • 2,874
  • 2
  • 19
  • 33
69
votes
4 answers

error 'document' is not defined : eslint / React

I'm building a React app, with create-react-app. I got the following error when running ESLint: 8:3 error 'document' is not defined no-undef. My app runs without error, but I got this ESLint error in 2 files. See one of those .jsx files and my…
Thomas Sauvajon
  • 1,660
  • 2
  • 13
  • 26
69
votes
8 answers

ternary operator in jsx to include html with react

I'm using react and I'm trying to display this error message if this.state.message === 'failed'. But I'm really not sure why this ternary operation isn't working. What am I doing wrong here? render() { ...
…
Modelesq
  • 5,192
  • 20
  • 61
  • 88
68
votes
2 answers

Typescript TSX and generic parameters

Typescript introduces support for the JSX syntax. So I have an expression that works quite well with traditional *.ts files but no with *.tsx ones: const f = (arg1: T1) => (arg2: T2) => { return { arg1, arg2 }; } I wonder is there a way…
shadeglare
  • 7,006
  • 7
  • 47
  • 59
67
votes
17 answers

React Router: Cannot read property 'pathname' of undefined

I've just started learning React and got stuck at this error. Uncaught TypeError: Cannot read property 'pathname' of undefined at new Router Here is my code: var React = require('react'); var ReactDOM = require('react-dom'); var { Route,…
Alon
  • 883
  • 1
  • 6
  • 18
65
votes
8 answers

How can I map through an object in ReactJS?

I have a response like this: I want to display the name of each object inside this HTML: {subjects.map((item, i) => (
  • { item.name }
    • ))} But it…
    Sireini
    • 4,142
    • 12
    • 52
    • 91
    63
    votes
    4 answers

    What do curly braces mean in JSX (React)?

    For an example, to set a style in react you could do var css = {color: red} and

    Hello world

    Why do you need the curly braces around css in the second code snippet?
    EverRip
    • 661
    • 1
    • 6
    • 7
    62
    votes
    4 answers

    Render curly braces as plain text in React/JSX

    I am having problems displaying { and } as text in React. I saw a similar question that someone said to wrap the entire string in curlies, but this is not working: let queries_block = this.state.previous_queries.map((dataset) => { return…
    codyc4321
    • 9,014
    • 22
    • 92
    • 165
    1 2
    3
    …
    99 100