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
1969
votes
84 answers

Loop inside React JSX

I'm trying to do something like the following in React JSX (where ObjectRow is a separate component): for (var i=0; i < numrows; i++) { } I realize and understand why this isn't valid JSX, since JSX…
B Robster
  • 40,605
  • 21
  • 89
  • 122
813
votes
52 answers

Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object

I am getting this error: Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. This is my code: var React = require('react') var…
Pankaj Thakur
  • 9,481
  • 3
  • 23
  • 27
690
votes
26 answers

What is the type of the 'children' prop?

I have a very simple functional component as follows: import * as React from 'react'; export interface AuxProps { children: React.ReactNode } const aux = (props: AuxProps) => props.children; export default aux; And another…
Asool
  • 13,031
  • 7
  • 35
  • 49
568
votes
11 answers

ReactJS - .JS vs .JSX

There is something I find very confusing when working in React.js. There are plenty of examples available on internet which use .js files with React but many others use .jsx files. I have read about JSX files and my understanding is that they just…
ConfusedDeveloper
  • 6,389
  • 4
  • 21
  • 36
452
votes
34 answers

Cannot use JSX unless the '--jsx' flag is provided

I have looked around a bit for a solution to this problem. All of them suggest adding "jsx": "react" to your tsconfig.json file. Which I have done. Another one was to add "include: []", which I have also done. However, I am still getting the error…
AJDEV
  • 4,790
  • 3
  • 14
  • 22
426
votes
21 answers

How to use componentWillMount() in React Hooks?

In the official docs of React it mentions - If you’re familiar with React class lifecycle methods, you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined. My question is - how can we use…
Abrar
  • 6,874
  • 9
  • 28
  • 41
403
votes
9 answers

ReactJs: What should the PropTypes be for this.props.children?

Given a simple component that renders its children: class ContainerComponent extends Component { static propTypes = { children: PropTypes.object.isRequired, } render() { return (
{this.props.children}
…
d3ming
  • 8,496
  • 5
  • 31
  • 33
353
votes
14 answers

How to render HTML string as real HTML?

Here's what I tried and how it goes wrong. This works:
Hi there!" }} /> This doesn't:
The description property is just a…
Sergio Tapia
  • 9,173
  • 12
  • 35
  • 59
309
votes
9 answers

Dynamic tag name in React JSX

I am trying to write a React component for HTML heading tags (h1, h2, h3, etc.), where the heading level is specified via a prop. I tried to do it like this: Hello And I expected output…
Eranga Kapukotuwa
  • 4,542
  • 5
  • 25
  • 30
230
votes
3 answers

Can I add a key prop to a React fragment?

I am generating a dl in React:
{ highlights.map(highlight => { const count = text.split(highlight).length - 1; return ( <>
{highlight}
sdgfsdh
  • 33,689
  • 26
  • 132
  • 245
183
votes
8 answers

  jsx not working

I am using the   tag in jsx and it is not rendering the space. The following is a small snippet of my code.Please help. var Reporting=React.createClass({ render: function(){ return(
…
Indraneel Bende
  • 3,196
  • 4
  • 24
  • 36
172
votes
10 answers

Why shouldn't JSX props use arrow functions or bind?

I'm running lint with my React app, and I receive this error: error JSX props should not use arrow functions react/jsx-no-bind And this is where I'm running the arrow function (inside onClick): {this.state.photos.map(tile => (
KadoBOT
  • 2,944
  • 4
  • 16
  • 34
171
votes
4 answers

Why is the `MouseEvent` in the checkbox event handler not generic?

I have an checkbox TSX(JSX) element: With the help of VS code I know that the input parameter type of the this.handleCheckboxClick is MouseEvent. So…
Ben
  • 3,612
  • 3
  • 19
  • 24
167
votes
9 answers

How to define css variables in style attribute in React and TypeScript

I want to define jsx like this: {array}
and I use --length in CSS, I also have cells that have --count that shows count using CSS pseudo selector (using the…
jcubic
  • 61,973
  • 54
  • 229
  • 402
156
votes
13 answers

React.js: Identifying different inputs with one onChange handler

Curious what the right way to approach this is: var Hello = React.createClass({ getInitialState: function() { return {total: 0, input1:0, input2:0}; }, render: function() { return (
{this.state.total}
T3db0t
  • 3,491
  • 4
  • 28
  • 45
1
2 3
…
99 100