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

Iterating over JSON in React

I have following code: export class Highlights extends React.Component { render() { return (
{JSON.stringify(this.props.highlights_data.data)}
) } } This prints out the…
davideghz
  • 3,596
  • 5
  • 26
  • 50
19
votes
3 answers

JSX props should not use .bind()

How to fix this error when I have the binding this way: previously binding in constructor solved but this is a bit complex for me: {this.onClick.bind(this, 'someString')}> and
monkeyjs
  • 604
  • 2
  • 7
  • 29
18
votes
2 answers

SVG in JSX - how to convert defs tag

I have some SVGs that have a defs attribute with a style tags inside. Like this: ... I want to use these…
feychu
  • 1,284
  • 1
  • 14
  • 33
18
votes
4 answers

Converting React function component to class component issue

I have the following react functional component to help support authentication required routes with react-router. const PrivateRoute = ({ component: Component, ...rest }) => ( ( isAuthenticated() ? ( …
Chris Dellinger
  • 2,292
  • 4
  • 25
  • 33
17
votes
2 answers

Why kebab-case non-standard attributes are allowed while others aren't? And how to define types like this in TypeScript?

Using foo as an attribute throws an error: // App.tsx // throws const App = () =>
export default App Type '{ foo: true; }' is not assignable to type 'DetailedHTMLProps,…
Wenfang Du
  • 8,804
  • 9
  • 59
  • 90
17
votes
5 answers

How to add Adsense to a website built with GatsbyJS?

I'd like to know where I should add the provided by Google Adsense. They say to add it into the , but in Gatsby you have Helmet as . I tried also to add the script inside an html.js file where it's located a…
Joe Doe
  • 433
  • 3
  • 7
17
votes
8 answers

Most efficient way of rendering JSX elements when iterating on array of data in React

I have an array which contains objects. I am creating a map of this array to renders the names with a span component. let data = [{"id": "01", "name": "Hi"}, {"id": "02", "name": "Hello"}]; I have been using the below two different functionalities…
Hemadri Dasari
  • 32,666
  • 37
  • 119
  • 162
17
votes
8 answers

simplify redux with generic action & reducer

In React-Redux project, people usually create multiple actions & reducers for each connected component. However, this creates a lot of code for simple data updates. Is it a good practice to use a single generic action & reducer to encapsulate all…
Maria
  • 3,455
  • 7
  • 34
  • 47
17
votes
7 answers

How to show results of a map in two or more columns using react

I think I have a simple question, but I can't get a solution to do this with react, I would like show results in two columns like: item 1 | item 4 item 2 | item 5 item 3 | item 6 I tried verify if array lenght is 0 or new start column, but I can't…
user8321027
17
votes
4 answers

How to have a external JSON config file in react jsx

I want to have a external configuration file (JSON) in my React based project. That is the ultimate outcome or when I deliver it (public folder and the bundle.js) my configuration file also should be given. The User should be able to change the…
JEJC_JACALK
  • 409
  • 1
  • 5
  • 13
17
votes
4 answers

How to loop through object in JSX using React.js

So I have a React.js component, and I want to loop through an object I import to add HTML options to it. Here is what I tried, which is both ugly and does not work: import React from 'react'; import AccountTypes from '../data/AccountType'; const…
kibowki
  • 4,206
  • 16
  • 48
  • 74
17
votes
2 answers

What is the best way to have variable attributes in JSX?

Hopefully my question is clear, I'm mainly looking for a way to dynamically attach attributes to a JSX input. Is something like this possible without overriding the way JSX compiles from…
Chris Hawkes
  • 11,923
  • 6
  • 58
  • 68
17
votes
2 answers

Generic React components in TypeScript/JSX?

I would like to create pluggable React components. Components are resolved by their class names, so I am naturally drawn to generics; but this doesn't seem to work. class Div extends React.Component { …
Carl Patenaude Poulin
  • 6,238
  • 5
  • 24
  • 46
17
votes
4 answers

WebStorm/PhpStorm warning for react attributes in jsx like className

I can not remove following warning in react code. "Attribute className is not allowed here". Warning in PhpStorm Unknown HTML tag attribute can not be set to camelcase only lower case is saved, and turning the check off is not…
Marcel Mandatory
  • 1,447
  • 13
  • 25
16
votes
1 answer

React JSX Invalid ARIA attribute `ariaLabel`

react jsx: rendered html: console warning: index.js:1 Warning: Invalid ARIA attribute `ariaLabel`. Did you mean `aria-label`? ummm no, I meant ariaLabel since we…
Nick Carbone
  • 445
  • 1
  • 4
  • 9
1 2 3
…
99 100