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

Each child in a list should have a unique "key" prop: Unable to determine the issue in my code

I am new to Typscript with React and I am getting this error message on my Google console Inspect element. I checked many posts over this but unable to understand what went wrong here. Can someone help to rectify the mistake in my code? index.js:1…
Richa
  • 151
  • 1
  • 3
  • 8
2
votes
1 answer

How do I prevent event bubbling with react-router-dom's ?

Okay. So I have something like this. I added the Link around the whole post thinking I could just stop the bubbling for the individual buttons, but stopPropagation() is not working as expected. I have split the button actions into a separate…
ram
  • 680
  • 5
  • 15
2
votes
0 answers

How to store the JSX template of React Native in an offline database and fetch it back?

How to store the JSX template of React Native in the database? If stored in string format, how to convert it back to JSX after fetching from the database? For example: if we store JSX as string format 'test' in realm database. How can…
2
votes
1 answer

What does it mean that "JSX maps to function calls"

I'm learning react and I was trying to find a way to loop inside JSX when I came across this stackoverflow link - Loop inside React JSX The author of the question says that I realize and understand why this isn't valid JSX, since JSX maps to…
2
votes
2 answers

'TypeError: fs.existsSync is not a function' ReactJS and Electron

I'm having an issue where I'm getting a TypeError: fs.existsSync is not a function error when my React App loads. I'm trying to add functionality to my custom MacOS buttons, however, when I seem to import {remote} from 'electron', I get that…
Vidsify
  • 57
  • 1
  • 1
  • 10
2
votes
1 answer

Green line on the bottom of my video only in Chrome. How to get rid of this?

I have supplied a screenshot of the green line occurring on the bottom of my video. In the Chrome browser the green line is visible both when it's maximized in the and when it's in it's normal state, the only time the green line isn't visible is…
Jem
  • 45
  • 1
  • 6
2
votes
1 answer

Use absolute path for .jsx files?

I'm trying to make the import file paths in my react app absolute. (EDIT: I'm trying to make this: import fetchAPI from "../../util/api" to this import fetchAPI from "util/api" ) I've seen solutions to this by using the jsconfig.json as such { …
NiceRice
  • 29
  • 6
2
votes
1 answer

React JS - TypeError: this.state.data.map is not a function

Now i am trying to fatching data from API using axios and React JS. But when i use this code i got this error: TypeError: this.state.countries.map is not a function I have state data:[] and I am trying to set the values of URL in the state. So my…
Oktam Yaqubov
  • 113
  • 12
2
votes
1 answer

How to evaluate string which contains Jsx Native code as code in Render()?

I have some variables stored in state which contains code to render in React Native, like: JsxToRender = " Titre 1
valentin
  • 41
  • 2
2
votes
2 answers

How to change an object value of a state array by using a specific array index

I'm trying to change the value of an object key from a state array using setState. The change should be in such a way that only a specific value of object should be changed from the array of index i. This index is passed as follows import React from…
Lalas M
  • 1,116
  • 1
  • 12
  • 29
2
votes
1 answer

ESLint wants setSate as a dependency for useEffect but this causes an infinite loop (react-hooks/exhaustive-deps)

I have the following situation: const [values, setValues] = useState({ username: "", password: "" }); const [submitButton, setSubmitButton] = useState({ disabled: true }); useEffect(() => { const disabled =…
Kerim Güney
  • 1,059
  • 1
  • 10
  • 23
2
votes
3 answers

Using styled-jsx, how can I use styles on JSX stored in a variable?

I am using a variable to conditionally show different JSX and it isn't using the styling that is defined in its parent function. How can I make that work? You can see a demo here: https://codesandbox.io/s/styled-jsx-example-e6tf6 import React from…
zeckdude
  • 15,877
  • 43
  • 139
  • 187
2
votes
1 answer

Multiple Rows Within Container - Flex - React-Native

First, I can't seem to set up a CodeSandBox - the following code in the index.js file just renders a blank screen: https://codesandbox.io/s/q4qymyp2l6 import React, { Component } from 'react'; import { View } from 'react-native'; export default…
HappyHands31
  • 4,001
  • 17
  • 59
  • 109
2
votes
0 answers

Adding types to a destructured react component property that is being set as a route component?

I have the following JSX code - export default function AppliedRoute({ component: C, appProps, ...rest }) { } /> return
BrokenWings
  • 169
  • 12
2
votes
1 answer

How do I replace the current component content with other component content in React

Hey guys I know the title is a bit confusing , but im sure here you will understand better what i need. So im trying to build a social media app like instagram and at the moment im building the login component but im stuck since im still learning…
Chrissisbeast
  • 151
  • 1
  • 8
1 2 3
99
100