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
149
votes
6 answers

Passing object as props to jsx

I have an object contains multiple common key-value props, that I want to pass on to some jsx. Something like this: const commonProps = {myProp1: 'prop1',myProp2: 'prop2'}; I want this to function as passing individual…
Sabrina
  • 1,621
  • 2
  • 11
  • 16
144
votes
13 answers

ESLint with React gives `no-unused-vars` errors

I've setup eslint & eslint-plugin-react. When I run ESLint, the linter returns no-unused-vars errors for each React component. I'm assuming it's not recognizing that I'm using JSX or React syntax. Any ideas? Example: app.js import React, {…
Don P
  • 60,113
  • 114
  • 300
  • 432
143
votes
23 answers

JSX or HTML autocompletion in Visual Studio Code

Is there any way to use components or HTML completion in Visual Studio Code? Because typing each letter manually is not good idea when we have classes like Bootstrap etc. For example completion as in Emmet: ul>li*2>a var React =…
owais
  • 4,752
  • 5
  • 31
  • 41
139
votes
6 answers

Typescript + React/Redux: Property "XXX" does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes

I'm working on a project with Typescript, React and Redux (all running in Electron), and I've run into a problem when I'm including one class based component in another and trying to pass parameters between them. Loosely speaking, I've got the…
Protagonist
  • 2,219
  • 2
  • 12
  • 12
138
votes
16 answers

React Native - Image Require Module using Dynamic Names

I'm currently building a test app using React Native. The Image module thus far has been working fine. For example, if I had an image named avatar, the below code snippet works fine. But if I change it to…
Shaheen Ghiassy
  • 7,397
  • 3
  • 40
  • 40
124
votes
18 answers

Visual studio code changes format (React-JSX)

I've the following snippet in my index.js class App extends Component { render() { return (
Welcome to React!
) } } The code works, but every time I save (ctrl+s)…
omer727
  • 7,117
  • 6
  • 26
  • 39
122
votes
16 answers

You should not use outside a

I'm trying to set up react-router in an example application, and I'm getting the following error: You should not use outside a My app is set up like so: Parent component const router = (
a7dc
  • 3,323
  • 7
  • 32
  • 50
118
votes
5 answers

Using a forwardRef component with children in TypeScript

Using @types/react 16.8.2 and TypeScript 3.3.1. I lifted this forward refs example straight from the React documentation and added a couple type parameters: const FancyButton = React.forwardRef((props, ref) => (
trevorsg
  • 1,210
  • 2
  • 7
  • 7
107
votes
6 answers

How to do a nested if else statement in ReactJS JSX?

I wanted to know if its possible to do nested if else if in ReactJS JSX? I have tried various different ways and I am unable to get it to work. I am looking for if (x) { loading screen } else { if (y) { possible title if we need it } …
ALM
  • 2,555
  • 7
  • 31
  • 45
105
votes
18 answers

expected assignment or function call: no-unused-expressions ReactJS

class Game extends Component { constructor() { super() this.state = { speed: 0 } //firebaseInit() } render() { return (

The Score is {this.state.speed};

) …
Prateek Pandey
  • 1,077
  • 2
  • 8
  • 14
104
votes
8 answers

Using styled-components with props and TypeScript

I'm trying to integrate TypeScript into our project and so far I stumbled upon one issue with styled-components library. Consider this component import * as React from "react"; import styled from "styled-components/native"; import { TouchableOpacity…
Ilja
  • 44,142
  • 92
  • 275
  • 498
100
votes
15 answers

React-Native Button style not work

Import_this import {AppRegistry, Text, View, Button, StyleSheet} from 'react-native'; This my React Button code But style not working Hare ...
98
votes
3 answers

Console logging for React

I'm super new to React and I'm trying to get it set up for Meteor and piecing stuff together from other sources too. One of these other sources set up console logging for the app, but I'm going the ES6/JSX way, so just using their code wouldn't work…
adinutzyc21
  • 1,538
  • 1
  • 11
  • 23
96
votes
21 answers

React site warning: The href attribute requires a valid address. Provide a valid, navigable address as the href value jsx-a11y/anchor-is-valid

I am getting a warning on a React site I built ./src/components/layout/Navbar.js [1] Line 31: The href attribute requires a valid address. Provide a valid, navigable address as the href value jsx-a11y/anchor-is-valid on the following code: …
msm1089
  • 1,314
  • 1
  • 8
  • 19
92
votes
3 answers

How to Call a Function inside a Render in React/Jsx

I want to call a function inside some embedded html. I tried the following but the function isn't called. Would this be the incorrect way of calling a function inside a render method? import React, { Component, PropTypes } from 'react'; export…
lost9123193
  • 10,460
  • 26
  • 73
  • 113
1
2
3
…
99 100