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

How to render string as custom React component?

So I have this code ReactDom.render(, document.getElementById("main")); This works perfectly and it renders Home component. I want to make this code dynamic instead Home component, it can be any component like Apartment or Building…
2
votes
1 answer

Dynamic Forms in React, Cannot read property 'map' of undefined

Overview So I'm only new to React and I'm having trouble trying to create a dynamic form. At the moment I want bug.pages and bug.steps_to_reproduce to be dynamic, meaning when I click a button like the "+ Add Page" it will add the new fields to…
Finn
  • 57
  • 3
2
votes
1 answer

How to set antd input.search set readonly upon onSearch

I'm trying disable, or even better, make the content of my input.search component non-editable, after a user clicks search. However, using the disabled property to achieve this, also disables the "search" button, and I only need to disable the…
Nili
  • 1,963
  • 3
  • 20
  • 39
2
votes
3 answers

if statement does nothing while checking

I'm working on a photo slider, but an if statement doesn't work... I've got 2 if statement. One if statement works perfectly, while the other one does nothing. Code: import React, {useState} from "react" export const Slideshow = () => { const…
Valdemar Vreeman
  • 177
  • 2
  • 16
2
votes
1 answer

Loop through object, if condition is met, return additional mark up

I am looping through an object, it loops through the DropZone Object 4 times, each DropZone has an id dropZones: { 'zone-1': { id: 'zone-1', title: 'zone-1', info: 'Strongest', items: [ …
invrt
  • 689
  • 6
  • 24
2
votes
2 answers

TypeError: render is not a function updateContextConsumer

I'm new at ReactJs and trying to learn ContextAPI but I'm having this error.I read titles about this situation but I can't reach to solution.Firstly I tried to re-install react as a old version but it didn't changed.I tried to wrap App inside of…
O.Ufuk
  • 275
  • 1
  • 4
  • 8
2
votes
0 answers

How to show blinking cursor in a readonly Material UI TextField in React JS

I have set the TextField to be readOnly as I don't want the phone keypad to popup when user taps on it, instead I have a custom keypad for input. Everything works fine except there is no blinking cursor which denotes that the field is editable. The…
Gaurav
  • 857
  • 3
  • 21
  • 29
2
votes
2 answers

React setState updates value but not showing up in the UI

I'm a beginner and want to write a small warehousing app. A click on the take or add button in the listItem component should call the addAmount or takeAmount functions and change the amount-value of the listItem. console.log provides the right…
demiurge
  • 23
  • 3
2
votes
3 answers

Calling function in child passed from parent in useEffect() hook, React

I have defined a function in my parent component that updates local state and passed it to the child component. In the child component I want to call the function in useEffect hook every time the magLockDropdown dependency value changes. When trying…
GaB
  • 157
  • 1
  • 3
  • 12
2
votes
2 answers

getting a string instead of html returned from function in React

At the top of my gatsby blog (a react component) I have a function that gets a url's extension, and based on whether it's an image or a video it returns a line of html like so: const printPicOrVid = function(myUrl) { let fileExt = …
StephD
  • 266
  • 3
  • 20
2
votes
1 answer

How to transform one svg path to another with animation in React Native?

I want to change the SVG path or the shape from curve to rectangular whenever the user click on the text input. How to do it with animation or transition from curve to rectangular shape? So that the curve go up until it becomes a line. I am able to…
Ali Zuhair
  • 303
  • 4
  • 17
2
votes
2 answers

React jsx conditional styling of component

I am conditionally styling my (standard HTML) component. I am passing inline JSX style as a style prop: render() { return ( <>
soundust
  • 45
  • 1
  • 1
  • 6
2
votes
1 answer

React-Native Horizontal scroll jumps when scrolling

So I am working on this react-native app, in this part I am working on a graph that look much like a calendar really you can scroll horizontally to see different days; you start by today on the very far right and you can scroll left to see previous…
user12581183
2
votes
2 answers

Regex validation within if statements

Hi I am hoping this may be and easy one for some of you. Essentially I am just asking if it is possible to use a regex match statement within a if statement. I have used some in my Formik validation schema but am not sure if it is possible to use…
coderStew
  • 137
  • 2
  • 13
2
votes
1 answer

How do you repeat a character, after content, and fill it to 100% of width? JSX / React

I have been looking for designs and I stumbled upon Material Design - Basil looking through the description I saw how Basil displays ingredients and was curious as to how that is…