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

How are boolean props used in React?

I'm trying to clarify some confusion I have about boolean props in React. Suppose a have MyComponent with several boolean props prop1, prop2... First: it seems that boolean props are like just others: you can define default values, either in…
leonbloy
  • 73,180
  • 20
  • 142
  • 190
27
votes
5 answers

React JSX error : Unclosed regular expression

Recently I was facing an issue coding React app on Visual Studio code. Because of this issue, whenever I wrote JSX inside the render function of the React Component and saved it, it would go messed up (I mean indentation would get messy). See the…
Abhay Shiro
  • 3,431
  • 2
  • 16
  • 26
26
votes
3 answers

How to do CSS :hover function in JSX ?

Hi and thanks for the great job here. I am using react.js for my project to build my components and I feel a little bit stuck in my project right now. I am trying to style a button with a hover function and I don't know how to apply this to…
user8116786
26
votes
3 answers

Why can't I have a JSX comment inside an element tag?

I'm following the common pattern of breaking multi-attribute tags on to multiple lines, eg.
I would like to add a comment inside that declaration, eg.
machineghost
  • 33,529
  • 30
  • 159
  • 234
26
votes
18 answers

React - Create nested components with loops

I have a little issue with React. I can't create a nested component with a for loop. What I want to do is create 9 cells of a table and then create 3 rows with 3 cells for every row and after that mount the 3 rows together and create a board…
neboduus
  • 418
  • 1
  • 5
  • 14
26
votes
3 answers

ESLint configuration for JSX

I want configure ESLint for check my JSX files but my configuration doesn't work. What is the correct way? .eslintrc.js: module.exports = { extends: 'airbnb', parserOptions: { ecmaFeatures: { jsx: true } }, plugins: [ …
SaroVin
  • 1,583
  • 3
  • 23
  • 46
26
votes
3 answers

React.js files syntax in sublime text 3

i am using sublime text 3 as my code editor,i have written a basic hello world example in React.but the coloring is improper on the code ,i have tried installing Babel plugin but even after that also the coloring doesn't seem to work ,as you can see…
yasar
  • 2,651
  • 4
  • 18
  • 18
25
votes
2 answers

WebStorm, React & JSX curly braces autocomplete

I have an issue with WebStorm and React. Within the render function I type my HTML (JSX) and when I type an attribute for an element, WebStorm will autocomplete it with curly braces instead of speech marks. Anyone any ideas?
Darren Keen.
  • 512
  • 6
  • 10
25
votes
3 answers

React Native: How to set 's height and width to container?

I currently have a inside a that has a padding: 15. I would like for the 's width and height to cover all space inside except the padding. So I tried var width = Dimensions.get('window').width and the following,…
Walter
  • 871
  • 3
  • 12
  • 16
24
votes
6 answers

react render Logical && vs Ternary operator

In the react render() when the value of x equals 1 both the logical && and ternary operator will display Hello and both are syntactically correct. I always used the && when I don't want to show the else part of my condition, but I have come across…
Dony Joseph
  • 499
  • 2
  • 5
  • 10
24
votes
16 answers

Hot Reload is not working in my React App

I have created this app with npx create-react-app. After this i have deleted all the files except index.js in src folder. Then Hot reload is not working. I have go to chrome and manually refreshing the page for see changes. This is my index.js…
Mridul Bagla
  • 917
  • 1
  • 5
  • 9
24
votes
6 answers

Assign a value to a variable in JSX for ReactJS

{props.stories.map((story) =>
{story = story.story}
)} The above code throws an error saying: Uncaught (in promise) Error: Objects are not valid as a React child…
Asim K T
  • 16,864
  • 10
  • 77
  • 99
24
votes
9 answers

multiple condition in ternary operator in jsx

black is the default color but what if I want to add the 3rd condition? status can be 'approved', 'rejected', 'pending' or more.
Jenny Mok
  • 2,744
  • 9
  • 27
  • 58
23
votes
4 answers

Create an extensible architecture with React

My team is creating the administration panel of a CMS using React, Typescript, TSX and Webpack. Each page of the administration panel has been created as a React component, and each page contains many other child components (one for each…
tocqueville
  • 5,270
  • 2
  • 40
  • 54
22
votes
2 answers

Rollup + React not compiling JSX

I'm trying to use Rollup + React but I'm encounting an error when rollup encounters JSX. Unexpected token... export default () =>

M... I have a repo that triggers the error. All documentation/examples I've found using Rollup + React don't use…

Brad Woods
  • 1,507
  • 2
  • 12
  • 30
1 2 3
…
99 100