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
56
votes
5 answers

React Native what exactly is the <> (empty) component

In React Native you can encapsulate a set of components in one single (or similar) component. You can also encapsulate a set of components as <> and . What are these? Do they just translate to an base View? It's probably not a good…
Sander Koldenhof
  • 1,223
  • 4
  • 13
  • 26
56
votes
4 answers

How to have nested loops with map in JSX?

I can't achieve to have two nested map: render() { return ( {Object.keys(this.state.templates).map(function(template_name) { return (
vmarquet
  • 2,384
  • 3
  • 25
  • 39
55
votes
6 answers

Display images in React using JSX without import

The problem I faced is with the img tag. When a single image is concerned, The below code loads the image: import image1 from './images/image1.jpg'; But the below code doesn't load: …
Gayathri
  • 1,776
  • 5
  • 23
  • 50
53
votes
1 answer

How can I add unique keys to React/Material UI Autocomplete component?

I'm trying to create a Material UI Autocomplete component that essentially just displays search results to the user. Some of the options' names will be duplicates, but they will all have unique IDs. I receive the following warning: index.js:1…
kougami
  • 696
  • 1
  • 6
  • 14
53
votes
1 answer

interface states and props in typescript react

I'm working on a project that uses TypeScript as well as React and I am new to both. My question is about interface in TypeScript and how that relates to props and states. What is actually happening? My application doesn't run at all unless I…
ceckenrode
  • 4,543
  • 7
  • 28
  • 48
52
votes
8 answers

Set loading state before and after an action in a React class component

I have function which dispatched an action. I would like to display a loader before and after the action. I know that react composing the object passed to setState. the question is how can I update the property in async way: handleChange(input) { …
Chen
  • 2,958
  • 5
  • 26
  • 45
48
votes
4 answers

"Console.log" with Photoshop Scripting - ExtendedScript Toolkit

I'm doing a bit of Photoshop scripting for the first time and it sure would be great to have a console.log-like function to output array and object values in the Javascript console of the ExtendScript Toolkit App. Is there an equivalent function?
Sebastien
  • 2,607
  • 9
  • 30
  • 40
48
votes
3 answers

Configure Emmet for JSX in VSCode

I use CSS like this: const styles = { foo: { color: 'red' } }
and I want emmet to expand .foo to
I don't see any reference to class or className in emmet's config file. Also…
Shining Love Star
  • 5,734
  • 5
  • 39
  • 49
48
votes
8 answers

How can I declare/ignore a missing JSX type?

I would like to use the SVG use element in a .tsx file: I'm transpiling this to React calls directly. However, I keep receiving the following error: Property 'use' does not exist on type…
John Weisz
  • 30,137
  • 13
  • 89
  • 132
48
votes
2 answers

Why do people put { " " } in their React / JSX?

I have this in some React documentation, as well as screencasts. People will write { " " } inside of their JSX templates. Why do they do this? It looks like they are using it as an alternative to line breaks, but I don't see that explicitly…
Rick
  • 8,366
  • 8
  • 47
  • 76
46
votes
15 answers

Media query syntax for Reactjs

How do I do the following CSS media query in Reactjs? .heading { text-align: right; /* media queries */ @media (max-width: 767px) { text-align: center; } @media (max-width: 400px) { text-align: left; } } I tried the following…
Let Me Tink About It
  • 15,156
  • 21
  • 98
  • 207
45
votes
1 answer

Correct way to create event handlers using hooks in React?

In a typical class-based React component, this is how I would create an event handler: class MyComponent extends Component { handleClick = () => { ... } render() { return ; …
Lucas
  • 16,930
  • 31
  • 110
  • 182
42
votes
10 answers

Passing props into external stylesheet in React Native?

I'm new to React and React Native. At the moment for each component I'm breaking the code into 2 separate files: index.js for all the React code, and; styles.js for the StyleSheet Is there a way to pass props into the external…
chapeljuice
  • 856
  • 1
  • 11
  • 21
41
votes
3 answers

How to add additional props to a React element passed in as a prop?

I am passing a react element as a prop to another element. In the child element that receives the prop, I need to set additional props to that element. For example: Parent class class Menu Extends React.Component { render() { return( …
sme
  • 4,023
  • 3
  • 28
  • 42
41
votes
3 answers

TypeScript vs JSX

I'm somewhat familiar with TypeScript and have recently been made aware of JSX. They both seem to be similar to me. I looked at the comparison to JSX on this website and they compared it to Dart and some other technologies but not to TypeScript. …
Eric
  • 2,861
  • 6
  • 28
  • 59
1 2 3
…
99 100