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

Updating a JSX Variable with useEffect "lost after each rerender" Issue

I've been trying to add optional JSX based on the circumstance, so I have initialized them to null and updated them once the time is right so they contain JSX. //initialize potentially unused parts let monitor = null; let keyboard =…
coddingtonjoel
  • 189
  • 2
  • 12
2
votes
0 answers

Eslint plugin for checking text bodies

I tend to accidentally hard code some strings like the name of the application into error messages. I have the name available in a const but I forget to use the const and write the name of the application in a JSX Element or a TypeScript string. The…
cyberixae
  • 843
  • 5
  • 15
2
votes
1 answer

React JSX - Filling an svg with an image

I am trying fill a simple circle SVG with an image in React. The sources I found have not been helpful, for they don't seem to apply to JSX. Here is the code I currently have: import React, {Component} from 'react'; import Anime from…
09fruits
  • 223
  • 3
  • 11
2
votes
0 answers

Vue (TypeScript) with JSX: nested elements are not rendered

I followed the instructions in https://github.com/vuejs/jsx to add JSX support in my Vue app. It does in fact work - it renders JSX, but for some reason does not render nested elements. public render(h: CreateElement): VNode { // This works as…
Liran H
  • 9,143
  • 7
  • 39
  • 52
2
votes
1 answer

How to set a default value for props in React native

I need to know how to set a default value for props to React Native. I have the following code: {props.pretitle}
Korovjov
  • 503
  • 5
  • 17
2
votes
1 answer

Detect FlatList onBeginningReached - React Native

I'm using a component to display a simple list. This component has events for onEndReached, but I could not find an equivalent for the top, like an onBeginningReached event. How do you detect that a user has scrolled to the very top of…
0xD1x0n
  • 686
  • 4
  • 12
  • 31
2
votes
1 answer

React diagram invisible and shows error at

I tried using react-diagrams library and I'm facing some problems. Firstly at the line const link = port1.link(port2); it shows me a error that TypeError: link.addLabel is not a function and suppose I remove the linking…
Br4v3_H3r0
  • 21
  • 2
2
votes
2 answers

how can I use state for multiple value?

I am trying to use two states in my Add Customer JS one is used to hide the form and the second is used for JSON. I want to use form-State to hide a form on cancel button click and the initial-State for JSON. I want to do something like this Is it…
Rahul Waghmare
  • 125
  • 1
  • 2
  • 9
2
votes
2 answers

How i can use the handleSubmit inside my component?

I'm making input validations with formik, when my form is filled he calls the function handleSubmit, but this function is outside my hook component, so I can't call dispatchs. How I can put the handleSubmit logic inside my hook component? This is my…
bla
  • 995
  • 3
  • 11
  • 44
2
votes
1 answer

How to use JXS within html elements' attributes' double quotes as we use in PHP?

So in php if we want to refer to a source of an image, we can do it like this " /> But in JSX of react, we can only do like But since I have only stored the name of the image, I need…
Kyi Zin
  • 823
  • 1
  • 6
  • 15
2
votes
1 answer

TypeScript complains about conditionally assigning class: JSX element type 'TouchableComponent' does not have any construct or call signatures

I have this piece of code: protected getCardContent = (message: string): JSX.Element => { const { placeInfo } = this.props; const TouchableComponent = Platform.OS === 'ios' ? TouchableOpacity : TouchableNativeFeedback return ( …
ehutchllew
  • 940
  • 8
  • 14
2
votes
2 answers

jsx console log inside map inside return statement

I'm working inside a stateless function controller in React. I'm trying to do a console.log inside a map that is inside a return statement. This works: {options.map(o => ( {console.log(o)} ))} And this works: return ( <> //more html/jsx…
control-panel
  • 255
  • 6
  • 17
2
votes
0 answers

How to W3C validate React app HTML output

Does anyone has any approach how to run you React app through W3C validator to discover if any HTML is invalid? Thanks W3C HTML validation for React JSX files is duplicate but was asked ~ 4 years ago. Maybe some new tools available these days?
Edvards Niedre
  • 620
  • 1
  • 6
  • 20
2
votes
2 answers

React/JSX: Iterating through an object with key/value pairs

I have an object that I'm using to keep track of which checkboxes have been checked on a UI. It looks something like this: checked: { key1: false, key2: false, key3: false, key4: false, key5: false, key6: false, key7: false, key8: false,…
helloWorld
  • 135
  • 3
  • 13
2
votes
2 answers

Cannot crop image using react-image-crop

I trying to crop image using react-image-crop (https://www.npmjs.com/package/react-image-crop/v/6.0.7). Actually I cannot move cropped area or stretch it. I also use there React DragZone to upload image. Could you explain what I'm doing wrong and…
Lev Kostychenko
  • 147
  • 1
  • 10