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
40
votes
2 answers

React TypeScript HoC - passing Component as the prop

Following this tutorial: https://reacttraining.com/react-router/web/example/auth-workflow. Trying to reproduce the code: const PrivateRoute = ({ component: Component, ...rest }) => ( …
0leg
  • 13,464
  • 16
  • 70
  • 94
39
votes
2 answers

Declaring Const With Curly Braces in JSX

I'm just getting started with React Native and getting used to JSX syntax. Is that what I'm talking about? Or am I talking about TypeScript? Or... ES6? Anyway... I've seen this: const { foo } = this.props; Inside a class function. What is the…
Varrick
  • 627
  • 1
  • 6
  • 11
38
votes
6 answers

Using boolean-value of attributes in JSX

I have a React.js project. I want to use data-picker plugin which require this style of input-attributes: But webpack doesn't compile the app, when true is without quotes. Plugin doesn't work, when true with…
Yarik Genza
  • 401
  • 1
  • 4
  • 7
37
votes
7 answers

Facing issue while adding radio button in react - input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`

Input is a void element tag and must neither have children nor use dangerouslySetInnerHTML. render() { let radioid = this.props.radioid; return (
{this.props.options.map(function(option) { …
Abdul
  • 942
  • 2
  • 14
  • 32
37
votes
4 answers

How to make vs code autocomplete React component's prop types?

How to make VS Code autocomplete React component's prop types while using the component in JSX markup? P.S.: I'm using JS, not TS.
MaxPrilutskiy
  • 471
  • 1
  • 4
  • 6
37
votes
12 answers

How to make a sticky footer in react?

I've made a sticky footer higher-level component that wraps other components inside itself: Footer.js //this is a higher-order component that wraps other components placing them in footer var style = { backgroundColor: "#F8F8F8", borderTop:…
Poliakoff
  • 1,592
  • 1
  • 21
  • 40
37
votes
2 answers

How to add a classname/id to React-Bootstrap Component?

Suppose we are using Row from React-Bootstrap... How do we style it without using a wrapper or inner element:
... Ideally, we could just do: ... But this doesn't…
Arman
  • 2,665
  • 3
  • 14
  • 19
36
votes
5 answers

JSX element class does not support attributes because it does not have a 'props' property.ts(2607)

I get this error when using "Cropper" from the react-easy-crop lib, I've tried a few things that I found on forums such as adding @types/react, importing * as React from "react" but nothing seems to work. Here's the code giving me trouble: import *…
BLSPR
  • 567
  • 1
  • 3
  • 13
36
votes
4 answers

React is rendering [object object] rather than the JSX

I'm trying to render out journal entries on my site with an object (not array) and I am running into an issue, here is my current code populateJournal(){ const j = Object.values(this.state.journal); var journalEntries = ''; for (var i = 0; i <…
ELI7VH
  • 504
  • 1
  • 5
  • 12
35
votes
2 answers

React: jsx in a variable vs a function vs a separate component

For rendering smaller components/jsx within a bigger component, there are multiple approaches that one can follow. For example, consider this: Method 1: function BigComponent(props) { const renderSmallComponent1 = () =>
{props.a}
; …
gaurav5430
  • 12,934
  • 6
  • 54
  • 111
35
votes
3 answers

How to pass state values to initial values in formik in react js

I'm using formik library in my react application. Initially, I declared state values in the constructor, In componentDidMount I'm calling an API with that app response am updating state values, Can anyone help me in passing state values to fomik…
Abhiram
  • 1,540
  • 1
  • 11
  • 25
35
votes
4 answers

How to auto indent jsx in VSCode

VSCode seems doesn't auto indent HTML elements in jsx? Is there any way to fix it. Update: In Atom: When I input
, atom will show: After I press the return key, the result is(pay attention to the location of the cursor): While in VSCode:
zhuscat
  • 604
  • 1
  • 6
  • 12
34
votes
2 answers

How to destruct `data-*` (hyphen cased) attributes from props?

Im trying to convert one of my components to a functional stateless component (FSC). But FSC will not be optimized if using ...rest, therefore i need to destruct the components props. I call Link as
user3711421
  • 1,658
  • 3
  • 20
  • 37
34
votes
1 answer

How to render (print) JSX as String?

Here JSX is scode sample: export default class Element extends React.Component { render() { return (
{this.props.langs.map((lang, i) =>
user1704398
  • 481
  • 1
  • 4
  • 7
34
votes
7 answers

How do I add attributes to existing HTML elements in TypeScript/JSX?

Anyone know how to properly add/extend all native HTML element attributes with custom ones? With the TypeScript documentation for merging interfaces, I thought that I could just do this: interface HTMLElement { block?: BEM.Block; element?:…
jedmao
  • 10,224
  • 11
  • 59
  • 65
1 2 3
…
99 100