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

EDIT: How to import MP3 files in React app

UPDATE The problem lied with my lack of knowledge in the environment I was working on but the answers given below should be useful for others with similar problems. EDIT: As it seems the problem is that there's something funky going on with trying…
KsK
  • 167
  • 1
  • 2
  • 8
13
votes
2 answers

Using props to set '&:hover' background-color

I'm wrapping Material UI's Chip component so that I can pass in values other than "primary" and "secondary" for the colors prop. I also want to maintain the hover effect if the chip is clickable so that the chip transitions to a different color when…
matwlev
  • 315
  • 1
  • 2
  • 6
13
votes
3 answers

How to perform import/export in client-side React JSX using Babel-Standalone

I'm using Babel-Standalone to use JSX in a React application without using NPM. Babel apparently translates 'import' statements into 'require' statements; importing 'require.js' and other dependencies to make this work produces more errors. Surely,…
Tom
  • 1,836
  • 4
  • 16
  • 30
13
votes
3 answers

How to prevent VS Code from adding space before self-closing JSX tag?

I have this issue for a while. We have ESlint and it forbids us to add space before self-closing JSX-tag, but when I format .jsx file within VS Code it inserts it. How may I disable it? There is screenshot with the problem: Thanks!
Nikita Shchypyplov
  • 1,090
  • 1
  • 9
  • 18
13
votes
4 answers

How to make dynamic state for multiple fields in react?

class Bills extends Component { constructor(props) { super(props) this.state = { productName: '', price: 0, quantity: 0, noOfProductsField: 0 } } handleChange = name => event => { this.setState({ …
Huzaifa Ahmed
  • 304
  • 1
  • 3
  • 15
13
votes
3 answers

JSX: Inline conditional attribute [href]

I am searching for inline conditional solution for Href attribute in jsx. I wanted to output if i provide an url:- Logo And if not:- Logo
JA9
  • 1,708
  • 3
  • 14
  • 18
13
votes
4 answers

Returning multiple elements in JSX

I'm trying to return two links if the user is not logged in. Something like this:
Alex Ironside
  • 4,658
  • 11
  • 59
  • 119
13
votes
1 answer

opening a modal with the click of a button

The next code uses a Modal react component: export class AddWorkLogEditor extends React.Component { constructor(props) { super(props); this.addWorkLog = this.addWorkLog.bind(this); this.onOpenModal =…
Jose Cabrera Zuniga
  • 2,348
  • 3
  • 31
  • 56
13
votes
1 answer

JSX files in create-react-app

Just wondering how create-react-app uses .js files instead of .jsx for jsx markup. Is it because of the special webpack configuration? Btw, where can I find the webpack and babel configuration of my project created with create-react-app?
Andrei Tarutin
  • 684
  • 1
  • 10
  • 25
13
votes
3 answers

react-bootstrap Form component

I have tried several times to use the
and components. Everytime I use I keep getting same erros: "warning.js?8a56:45 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string…
user1399063
  • 151
  • 1
  • 1
  • 4
13
votes
1 answer

How to pass nested properties with spread attributes correctly? (JSX)

#1 Hello. I have the code: class Component extends React.Component { render() { this.props.nested.prop = this.props.parse.nested.prop; return
Component
; } componentDidMount() { …
Kirill A. Khalitov
  • 1,225
  • 4
  • 16
  • 24
13
votes
6 answers

How to make image buttons in JSX?

This doesn't display an image, but still works as a button. My folder setup is /user/img/google.png and /user/loginGoogle.jsx , so I don't think there is a problem with source
dovla
  • 191
  • 2
  • 4
  • 11
13
votes
1 answer

After Effects / ExtendScript: Using libraries and importing .jsx files?

I am new to After Effects scripting but have much experience with JavaScript in the browser. How do I import .jsx files? Can I use js libraries such as underscore.js etc? What are some good resources for AE scripting? (Ideally infographics…
dani
  • 4,880
  • 8
  • 55
  • 95
12
votes
3 answers

Its instance type 'BrowserRouter' is not a valid JSX element

I work on a project developed in React + coreui that has always worked perfectly. However, in the last week, I had an inexplicable problem when deploying a modification. 18:03:11 Creating an optimized production build... 18:04:32 Failed to…
Luiz Paulo
  • 189
  • 1
  • 1
  • 6
12
votes
3 answers

How can I get values from input components (study purposes)?

My problem is that I'm trying to handle the value of my inputs, which the user defines which input he wants, by an API call. Here is where I get the values : const handleClick = buttonTitle => async () => { await…
Guilherme Cavenaghi
  • 225
  • 1
  • 2
  • 22
1 2 3
…
99 100