Questions tagged [jsx]

JSX is an open source programming language, or an AltJS with classes and static types. The source code is compiled into JavaScript which is highly optimized. For questions about React, use [reactjs] instead!

-2
votes
0answers
26 views

function displays [object,Object] instead of div elemeent - react.js

I have a function that iterates over a data object and based on one of the data attribute displays an icon and text. Now I am passing an icon and text as an object from another function. Due to this, ...
0
votes
0answers
11 views

After Effects Change expression variable from JSX

I'm trying to edit variable (txt) in expression that located inside "Source Text" (Text Layer). How can I get access to it from JSX file?
0
votes
1answer
21 views

React Material UI + Router redirect button

I am trying to use Material-UI for React but I am not sure about the proper way to redirect to other pages / components. I have read several sites about the different ways to redirect using react-...
1
vote
1answer
23 views

How to pass className to `h${headingLevel}` custom tag

I'm creating a custom component with a dynamic-level heading: const HeadingTag = `h${headingLevel}`; ... <HeadingTag className='heading'> {headingText} </HeadingTag> However, I get the ...
0
votes
0answers
10 views

How to make custom scrollable slider for products in React?

I need to make scrollable slider for products like in https://www.rolex.com/watches.html. Is there any example, package or library for React to make similar scrollable slider to this? What would you ...
0
votes
1answer
15 views

Add jss classname to array of jsx elements

import withStyles from "@material-ui/core/styles" function styles() { return { item: { color: "red" } } } const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((...
1
vote
1answer
20 views

Nested JSON Stringify wraps code in " and \. JSON Parse produces [object Object]

I am using Gatsby and I am trying to use a map of an array to produce nested JSON-LD that validates with schema.org. Code is: class TagRoute extends React.Component { render() { const ...
0
votes
2answers
44 views

Conditional Navigation Rendering in React

I'm building a simple react app using React v16.7 and MDB (Material Design for Bootstrap). react-router-dom handles my routing system. I want my navigation bar transparent in homepage, and in other ...
1
vote
1answer
33 views

JSX breaks … Looping over an array with map generating conditional JSX elements

I am having issues trying to build a custom component with a looping array that conditionally renders different elements. That component contains special classNames for generating a grid of 3 elements ...
1
vote
0answers
30 views

Is it possible to have Navlink activeClassName for more than one url? [React]

I want Cabinet section to be active not only for /cabinet/login url, but also for /cabinet/signup and /cabinet/orders. Here is my code for App and MainNavigation Components. App.js <...
0
votes
3answers
40 views

How to use checkboxes in react native for both android and IOS?

I have a modal with diffrent tabs in my app in which user can filter the search result with categories in the modal . right now it is working but I simply put an event on a <TEXT> , I need some ...
1
vote
1answer
39 views

Iterate over all Array indexes within array with map method Javascript

Been struggling with this for some time now and would appreciate any insight you guys have.. This is what my JSON Data looks like.. BinsByDayByOrchardsQCs [Array] > BinsByDayByOrchardsQCsDefects [...
0
votes
3answers
33 views

Can't link CSS to JSX while using Webpack

So, I'm pretty new to React and I'm doing a group project. I was following along some tutorials online and was able to get everything working fine, starting from scratch and working on my own. ...
0
votes
1answer
19 views

Issue w/ mapping array of props object into Data table component

I am trying to create a data table using react. I am able to properly display the data from the object I am passing as props within the table. However, all of the data is displayed in the first column ...
1
vote
2answers
31 views

How to fix “Expected an assignment or function call and instead saw an expression” in reactjs?

I am following Grinder tutorial on react.js with creating burgerapp. I'm getting error: Line 6: Expected an assignment or function call and instead saw an expression no-unused-expressions ...
2
votes
3answers
79 views

Do I need to use Redux or Context API

I have an application where user login first as usual. My app has several screens which is navigated by react-native-navigation. In every screen other than login, I need to know which user is using ...
-1
votes
0answers
30 views

Trying to use the same custom header in all pages in React Native without copying code

Still new to React Native so please bare with me if you will. So I'm referencing this link (https://medium.com/appandflow/react-native-scrollview-animated-header-10a18cb9469e) to create an animated ...
0
votes
1answer
36 views

Showing a graphql string as a link if that seperate graphql link source exists. Otherwise just showing it as a string

I have a series of items from a codebase that are either have a corresponding link value or do not as a seperate data value. These are listed called as post.frontmatter.SourceLink# and post....
0
votes
0answers
32 views

How to get links to open correctly?

I have a element on my website that get links from a form. I fetch the data and put it in a div. One of the fields of data is a link to the person's website. I have it so that when someone clicks on ...
0
votes
1answer
38 views

Why does a route change trigger .info/connected onDisconnect() to be called?

Why would React Router disconnect the current Firebase AuthUser when checking auth status for another route? When I switch between Routes (Home, Account, etc.), the onDisconnect() function is called ...
0
votes
4answers
52 views

Dynamic props to child component reactjs

I have a parent component passing state as props to a child component. An API is called on page load using componentDidMount in the parent component and the initial state of the data passed to the ...
0
votes
0answers
26 views

How to fix my refreshcontrol and scrollview in react-native

I want to create "pull to refresh" on my page, I can enable or show that refresh but after I pull down, always error undefined, I really tired want to re-render but its same issue, actually I'm using ...
1
vote
2answers
35 views

State not passing to the child component reactjs

I am trying to pass a state as props to another component. The child component (a button on the page) isn't receiving any props. I did a console.log to print the props received from the parent but I ...
0
votes
1answer
50 views

Pass value between components - React Native

I have a react-native app where i ask questions about an on going survey and i render each question in a form custom made card component: const { cardTitle, cardDescription, onYesPress, onNoPress } =...
1
vote
5answers
75 views

React: multiple JSX templates for one single component

I am a React newbie and I am developing a React application initially created using create-react-app module and I need it to be adapted to Mobile devices(browser)... For that I am facing the problem ...
-1
votes
1answer
25 views

Return multiple values in switch case using react.js

I am using a switch case to render text based on the case value. In addition to the text, I also want to add an icon. So for a particular case, there would be an icon and next to it there would be an ...
0
votes
1answer
21 views

Sending API request in react native after something is searched in searchbar (react-native-elements)

I have a react native search bar and I need to make an api call with the data user typed in the searchbar . but because I do not have a database on mobile device I want to make the request only if ...
0
votes
1answer
34 views

Can't make conditional rendering

I have Header component which I would like to use in multiple screens with multiple use cases such as in MainScreen I want to show only profile icon whereas in other screens I would like to use both ...
0
votes
0answers
44 views

What is better: ternary operator in jsx or two return in render method? [closed]

My component get isDeleted prop. I need to render Placeholder if isDeleted is true or render Table if isDeleted is false. What is better way to do it and why? 1) Use ternary operator: render() { ...
0
votes
1answer
47 views

Replace content via scripting in batch of smart objects(Replace layers) in photoshop cc 20.0.0

So I have these 28 *.tif image files as 28 layers (smart objects) I have arranged in a .psd file and wish to replace each layer with another .tif file. I wish to run some script(jsx) with loop ...
1
vote
2answers
31 views

How to pass an additional parameter with a defined prop function?

I need to declare a function for a prop which has defined parameter. The Component is Accordion from react-native-collapsible. The prop for the component that I want to implement a function is ...
-1
votes
3answers
59 views

How to switch components using navigation in React?

I am developing a landing page using React. It should have the same navigation bar for all sections and change only its active state. In App.js file I have used BrowserRouter that routes to ...
1
vote
1answer
26 views

How to set inital state from props after fetch?

I want to get data using fetch() and pass it down my component hierarchy, and use that data to set the initial state of one of my components I have tried setting the inital state using the props and ...
0
votes
0answers
36 views

Photoshop jsx search and replace text with specific font size for each replace

I am trying to search and replace multiple words in a text layer. Each word in that text layer has a specific font size which is lost during text replacing. Is there a way to replace characters but ...
0
votes
3answers
41 views

Trying to implement an incrementer

I have successfully implemented an incrementer app that shows a number with a + and - on each side. When either is clicked, the number goes up or down respectively. But because if statements work ...
-5
votes
2answers
48 views

React use component in inline style

I have a component: class PaddingStyle extends Component { constructor( props ) { super( ...arguments ) } render() { const { paddingTop, paddingRight, paddingBottom, ...
0
votes
1answer
40 views

First call to function to change state doesn't update any field

So basically I am integrating GraphQL with a React web application to do some testing and to learn a bit more about the stack (forgive me if I am a newbie). Just to resume it I basically have a book ...
1
vote
2answers
42 views

How to validate props with propTypes having defaultProps?

/* Default Props */ MyApp.defaultProps = { data: { totalCount: 123 }, name: 'john doe' }; /* Proptypes */ MyApp.proptypes = { data: { totalCount: Proptypes.number.isRequired }, ...
2
votes
2answers
63 views

Add JSX to Array object Javascript

In one of my component, I want to modify a fontsize and add a JSX to one of the property in array of objects. Is there someway to do it? Example: const data = [ { name: 'Page A',name1: 'Page A'...
2
votes
2answers
48 views

React compiler won't accept my .map function as a function

I can't get to get the complier acknoledge that I am passing an array to the map function, so I keep getting an error that my .map function is not a function. I just want to list links in an unordered ...
0
votes
0answers
44 views

Issues with React refs

I am kinda confused about React refs - creating and forwaring. Here is my case. <MyContent> <ul> <li> <ScrollToAnchor href="#target-1">Go to target 1</...
1
vote
0answers
43 views

Image to fit parent container dynamically depending on screen dpi

I am building this app with react native, the client want the text container to be exactely positioned and aligned with the blue container, the problem I am facing is that the green part is an actual ...
0
votes
1answer
25 views

Remove leading spaces on multiline text in React Native

Currently I have some Text elements inside a View element, the view has flexWrap:'wrap' which allows the inner text to wrap around instead of overflowing. However, I've noticed that sometimes when the ...
0
votes
1answer
31 views

How to render all items in a json object in react native?

I need to render all items in a json object in react native view but some of them are not in array and are not single items. here is my api: { "meta": { "code": 200, "message": "success", ...
0
votes
2answers
38 views

image doesn't display when I insert image in jsx file

I am trying to insert an image in a JSX file and I am getting this as an output --> and that is my code, where I tried to place the image inside the same folder of the script and also in a different ...
1
vote
3answers
51 views

How to render elements with if conditions in react-native?

I have a profile page for users , each user has a rate from 0 to 5. I want to fill the stars based on the user's rank. e.g. if user's rate is 4 I need 4 stars to be filled and 1 star be blank here is ...
0
votes
3answers
46 views

How to render an array within a JSON object in react-native

I am developing an app with react-native , using RESTfull api with laravel backend , I have an object that has arrays in it . I am using it to create user's profile page . but I don't know how to ...
1
vote
1answer
14 views

remove an element from dom in react so as to make another z index element clickable

I have a header div and alert div in my app. The alert div has a z-index of 2 to stack on the front on the header, so as to show notifications inside it. However, this is making the header div ...
-1
votes
0answers
16 views

Electron Channel names as shared constants

I have an electron app made of one main and one renderer. The two talk to each other using message passing. Each of them is in its own package. // on renderer side ipcRenderer.send(CHANNEL_NAME) // ...
0
votes
0answers
9 views

How to get the name of file that triggerred nodemon restart?

I have some JSX files in my src directory. I use babel cli to compile them and nodemon to watch for changes in these files. nodemon --watch src --exec "npx babel src -d bin" However, at each restart ...