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

How to set up Sublime Text 3 for React?

I'm trying to set up my Sublime Text 3 for React like the screenshots in this link, didn't succeed to make it though. Maybe I have some extra packages or settings that would show my index.js syntax like below: sublime-settings: { …
Emma
  • 27,428
  • 11
  • 44
  • 69
14
votes
4 answers

How to serve multiple HTML files with React?

I want to build a web application with React with multiple HTML pages. For example login.html and index.html. I've created these HTML pages and mapped them to URIs with my backend. So I have localhost:8080/login and localhost:8080/index.…
Taskmanager
  • 439
  • 2
  • 7
  • 18
14
votes
7 answers

Nested Text, Vertical Align not working - React Native

Ok, Let's make this simple. I've two Text components, one inside another. The first Text has fontSize of 60, and the nested one has fontSize of 20. As the font size varies, the nested Text sits base aligned. I want the nested Text vertically center…
theapache64
  • 10,926
  • 9
  • 65
  • 108
14
votes
1 answer

React JSX vs function call to present component

const Component = ({ text }) => (
{text}
) const Example = () => (
{Component({ text: "123" })}
) Is there any difference between the two methods of rendering? Which is preferred and…
Avery235
  • 4,756
  • 12
  • 49
  • 83
14
votes
2 answers

Reactjs - Adding ref to input in dynamic element render

I'm trying to focus/highlight input text onClick in React. It works as expected, but only on the last element in the rendered array. I've tried several different methods but they all do the exact same thing. Here are two examples of what I…
merrilj
  • 367
  • 1
  • 2
  • 11
14
votes
1 answer

Arrow vs classic method in ES6 class

Is there any reason to write classic syntax of ES6 methods? class MyClass { myMethod() { this.myVariable++; } } When I use myMethod() as callback on some event, I must write something like this (in JSX): // Anonymous…
Vesmy
  • 1,190
  • 4
  • 15
  • 29
14
votes
6 answers

Calling a function in React

I'm a beginner in React, and I'm a little confused about calling a function in React. I saw the following ways and I don't know when to use each and which one. handleAddTodo ={this.handleAddTodo} handleAddTodo ={this.handleAddTodo()} handleAddTodo…
Anyname Donotcare
  • 11,113
  • 66
  • 219
  • 392
14
votes
10 answers

jQuery fullCalendar displayed undefined on title

i'm using jQuery fullcalendar on a ReactJs component. i have a
on the render method and on componentDidUpdate , i updated the calendar with the following codes: $('#calendar').fullCalendar({ header: { left: 'prev,next…
Grand Julivan
  • 264
  • 2
  • 13
14
votes
2 answers

Correct way (if possible) to store JSX code into a Javascript variable

I´ve written the following code using ReactJs´s JSX syntax: import { Link } from 'react-router'; class SidebarMenuItem extends React.Component { render() { var href = (this.props.submenu ? 'javascript:' : {
Mendes
  • 17,489
  • 35
  • 150
  • 263
14
votes
2 answers

Mixed operators in JSX

I'd like to use mixed operators in JSX, for example: {datas && datas.map(function(data,i){ return }) || []} While this technically works, ES lint warns of 'no-mixed-operators'. Is this a safe pattern to use in JSX?
huge-iguana
  • 195
  • 2
  • 2
  • 11
14
votes
2 answers

Trailing forward slash in react-router routes

I am using react-router v3.0.0 with react v15.1.0. I have the following route setup: ReactDom.render(
Kenny Worden
  • 4,335
  • 11
  • 35
  • 62
14
votes
3 answers

create react app not loading css background images in dev or build

I'm having difficulty with some background images not loading. I've made some significant modifications to the initial create react app, my folder structure is now as follows: Note: I have omitted some files & folders, if you need more please let…
j_quelly
  • 1,399
  • 4
  • 16
  • 37
14
votes
3 answers

Do I have to save react component files with a jsx extension

I've been writing react for a few months now and I just realized that some of my files have a .js extension while others have .jsx extension. When I write jsx in the .js files, everything still works. Does it matter what the extension is? by the way…
Abdul Ahmad
  • 9,673
  • 16
  • 64
  • 127
13
votes
3 answers

How to use translation __() with hyperlinks

While creating a block in WordPress, I'll need to add a translation with a link inside. I'm doing this way in JS, but it isn't providing expected results: import { render } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; export…
micky
  • 277
  • 1
  • 13
  • 39
13
votes
4 answers

Can you modify NextJS mount element or add classes to __next div?

Long story short is I'm working on a project where I want to have the content "fill" the vertical space below the static header. I've done this in React with tailwind like this:
Dillan Wilding
  • 1,030
  • 2
  • 12
  • 28
1 2 3
…
99 100