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
16
votes
3 answers

JSX can be used without importing React

I'm trying to run my first React JSX file with create-react-app with version 4.0.0 and it works! However, I don't have the import statements of React included in my JSX and it works too but it is very weird. The project is created by…
Thomas.lin
  • 430
  • 1
  • 5
  • 11
16
votes
3 answers

Why is it best practice to surround JSX assigned to variables with parenthesis?

In the example below the output is the same for both x and y. I've seen React code written both ways. Is there a difference? As many of the React code examples I see utilize the parenthesis syntax, I assume there is a reason. If it's best…
Bruce Seymour
  • 1,520
  • 16
  • 24
16
votes
5 answers

Change image on hover in JSX

How do I change an image on hover in JSX I'm trying something like this:
Shahaji
  • 185
  • 1
  • 1
  • 12
16
votes
2 answers

how to render a react component using ReactDOM Render

_Header (cshtml)
export default class Help { ReactDOM.render( , document.getElementById('Help') ); } Help.js (component) } My goal is to render a help button on…
LOKI
  • 312
  • 1
  • 4
  • 17
16
votes
5 answers

React input onChange won't fire

I currently have this simple react app and I cannot get these onchange events to fire for the life of me. var BlogForm = React.createClass({ getInitialState: function() { return { title: '', content: '' }; }, changeTitle:…
user3748818
16
votes
3 answers

Specify/Set width and height on a react-boostrap modal

How can I apply a dynamic width and height to a react-bootstrap modal window? I have checked the react-bootstrap docs here but could not figure out how to do that. Actually the value of width and height props would be dynamic (could be any values)…
Faisal Mq
  • 5,036
  • 4
  • 35
  • 39
16
votes
2 answers

Atom.io: Emmet and jsx

It seems Emmet is supposed to work with .jsx files too, but I cant get it to work in atom. My divs are not expanding, nothing happens when i press tab. I've tried restarting Atom, disabled all other user packages and it works perfectly with html…
swelet
  • 8,192
  • 5
  • 33
  • 45
15
votes
2 answers

Eslint react/jsx-one-expression-per-line: allow variables and JSX strings on the same line, but not elements

E.g. for this JSX:

Hi {name}

The react/jsx-one-expression-per-line plugin wants it as:

Hi {' '} {name}

or

{`Hi ${name}`}

I think both of those are ugly. I want to allow the first example. However, I…
Leo Jiang
  • 24,497
  • 49
  • 154
  • 284
15
votes
2 answers

How to change emmet expanding "className" to "class" in VSCode for JSX/TSX?

In stencil's.js TSX elements attribute for the class selector is the class instead of className (as in React). Can't find a way in VSCode to change the class attribute's name for emmet's expansion. Tried preferences for emmet, but it doesn't…
Babchenko Nikolay
  • 151
  • 2
  • 5
15
votes
1 answer

Unexpected keyword 'this' reactjs jsx

I'm new to reactjs. I'm trying to put a condition in the render return method to show component. I'm getting the following error. ./components/Layouts/Header.js SyntaxError:…
Mahendra Pratap
  • 3,174
  • 5
  • 23
  • 45
15
votes
4 answers

How to trigger onChange on by another Button click in ReactJS?

Here, I want to trigger the onChange function of input, by clicking the button. How to…
techKid-Rinshad
  • 177
  • 1
  • 2
  • 9
15
votes
5 answers

Ascii/HTML character code doesn't work within React variable

I have the ascii/html code of a checkmark: ✔ ✔ In react if I go:
✔
then it works. but if I go var str = '✔';
{str}
it doesn't. It shows up as ✔ any ideas? class Hello extends React.Component { …
Shai UI
  • 50,568
  • 73
  • 204
  • 309
15
votes
3 answers

ImageBackground ResizeMode

I recently updated React-native and it introduced a warning, with the following code: …
Waltari
  • 1,052
  • 1
  • 30
  • 64
15
votes
2 answers

Applying className/onClick/onChange not working on Custom React Component

I'm almost new to react. I'm trying to create a simple editing and creating mask. Here is the code: import React, { Component } from 'react'; import Company from './Company'; class CompanyList extends Component { constructor(props) { …
dns_nx
  • 3,651
  • 4
  • 37
  • 66
14
votes
1 answer

How do I enable automatic prettier formatting for .jsx files in VS Code?

I have Prettier set up automatically formatting .js, .vue and other files on save. However, for some reason it is not triggering for .jsx files. Clicking the "Prettier" item in the status bar shows: ["INFO" - 10:48:25 am] Enabling prettier for range…
Steve Bennett
  • 114,604
  • 39
  • 168
  • 219
1 2 3
…
99 100