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

Enzyme is not finding component by props

I've got a component I'm testing with Enzyme that looks like the following:
…
whalabi
  • 1,675
  • 3
  • 12
  • 16
21
votes
2 answers

What is the correct return type replacement for JSX.Element after the global JSX namespace has been deprecated?

In @types/react, the global JSX namespace has been deprecated: declare global { /** * @deprecated Use `React.JSX` instead of the global `JSX` namespace. */ namespace JSX { ... } } Since I have ESLint's…
sceee
  • 1,681
  • 19
  • 34
21
votes
2 answers

How can I intregate ESLint in a Vite+React project?

When I create a React application using Create React App, ESLint is included by default. That's why we don't want to integrate ESLint manually. But when I create a React application using Vite there doesn't exist any kind of linting like ESLint or…
H Nazmul Hassan
  • 631
  • 2
  • 8
  • 17
21
votes
5 answers

"React must be in scope when using JSX" (react/react-in-jsx-scope with "window.React = React" on index.js)

I am following Chapter 5, "React with JSX", of "Learning React" from O'Reilly. I wrote the Recipes App using create-react-app as the base. index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from…
ohkts11
  • 2,581
  • 2
  • 21
  • 17
21
votes
1 answer

how to use escape characters in JSX

I want to use some escape characters in my React application but I have not found any resource that how can I use escape character in my application. Is any methodology available?
aashir khan
  • 598
  • 3
  • 7
  • 20
21
votes
7 answers

How to return an empty jsx element from the render function in react?

I have a code in react that looks something like this: class UserManagement extends React.Component { constructor() { super(); this.state = { users: undefined, }; } componentWillMount() { …
Yuval Pruss
  • 8,716
  • 15
  • 42
  • 67
21
votes
1 answer

How do I make an HTTP request in react-redux?

I am just getting started with react and I'm a bit lost. I'm trying to make a login page and make a http post request. Right now I'm just trying to get any type of HTTP request working, so I'm using request bin and I found this basic action in the…
jmona789
  • 2,711
  • 6
  • 24
  • 57
21
votes
4 answers

forEach over es6 Map in JSX

I had a javascript array that was rendering components using array.map. I switched this array to an es6 Map in order to be able to use key-value pairs to find items more easily, and switched from a .map to a forEach over the Map. Inside the forEach…
alsoALion
  • 449
  • 1
  • 5
  • 17
20
votes
7 answers

How to set max number of items that can be selected in react-select?

I am using CreatableSelect component from react-select. Now users can select as many items as they want, but I want users to select no more than 5 items. How to limit max number of options that can be selected?
Bositkhon Sultonov
  • 685
  • 1
  • 9
  • 26
20
votes
2 answers

Optional JSX Props In a TSX/JSX Project

I have a React project that I'm converting from JS to TS. An issue I'm running into is that TSX React is assuming that all properties defined in a functional component are required props. // ComponentA.tsx class ComponentA extends…
Tyler Sebastian
  • 9,067
  • 6
  • 39
  • 62
20
votes
3 answers

React inline conditional component attribute

I've been searching everywhere and can't find an answer to my question. So I want a conditional attribute which is only displayed on certain conditions, example: As you can see I only…
JohnnyQ
  • 4,839
  • 6
  • 47
  • 65
20
votes
4 answers

React.js - use svg linear gradient not working

I have a circle and a gradient to fill in it, I put in the gradient and call him in path by style fill. import React,{PropTyoes} from 'react'; import {connect} from 'react-redux'; import * as Actions from '../controllers/Actions'; export…
hod caspi
  • 826
  • 2
  • 10
  • 17
20
votes
4 answers

JavaScript/React Style Guide Indentation

Is there an agreed-upon convention for indentation in React JSX? 2 spaces, 4 spaces, tabs, etc.
user4932805
20
votes
2 answers

How to use whiteSpace: 'pre-wrap' on React

How can I use the style whiteSpace: 'pre-wrap' on React I have a div that need to render the text using the format with spaces render() {
}
Sibelius Seraphini
  • 5,303
  • 9
  • 34
  • 55
19
votes
1 answer

How to style a functional stateless component in Reactjs using classes object

I want to write and style a functional stateless component in ReactJs as described here. const MyBlueButton = props => { const styles = { background: 'blue', color: 'white' }; return
Let Me Tink About It
  • 15,156
  • 21
  • 98
  • 207
1 2 3
…
99 100