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.
222
questions
0
votes
2
answers
44
views
Trivia game in react
I built a simple trivia with React from Vite that reads from an external JS file.
Here is the main code for the game:
...
- 313
-6
votes
0
answers
60
views
Can someone please have a look on my code - one component [closed]
I'm a self taught dev and just got a take home exercise for my technical interview. It is just one component build in React, I've attached picture of how it should look - mine looks identical. It ...
- 1
1
vote
0
answers
31
views
React/Html dragging and dropping items between two lists
I am implementing two lists with draggable items. The items can be re-arranged within each list or can be inserted to another list.
I had some difficulty implementing the drag and drop behavior when ...
- 232
0
votes
0
answers
81
views
Debouncing events and stale closures in functional React
Context
As part of our React application, in which we use functional components, we encountered a scenario where we needed to debounce parts of a DOM event listener for usability purposes. The actual ...
- 213
0
votes
0
answers
19
views
Replicability of a React Modal Form
I have a form type that I use several times throughout my project, and I've noticed that, rather than making the form replicable, I've just copied and pasted it a few times and made slight adjustments ...
1
vote
0
answers
46
views
Weather and health app
This is a weather app that provide health and weather details based on the location you enter. Can someone help me to review my code?
...
0
votes
1
answer
140
views
Sorting Visualizer in React
I just started learning React for a university project to make an algorithms visualizer. I need a review of my code below for visualizing selection sort.
I would also appreciate suggestion on how to ...
- 11
2
votes
0
answers
420
views
React hook to play audio with Web Audio API
My goal was to make playing sounds in my React game easy and efficient. Using <audio> tags wasn't an option, because on mobile it creates huge delays between ...
- 121
1
vote
0
answers
30
views
American Football Scoreboard in React
I built a fully functional American football scoreboard in React. I know that I made a lot of terrible design choices, but I would like to know what they are:
...
- 313
1
vote
1
answer
110
views
Function component wrapper for the js-year-calendar widget
I have this class component from the rc-year-calendar library.
...
2
votes
0
answers
107
views
My Weather app with current, hourly and daily forecasts
This is my first independent project. Do you have any criticisms or suggestions before I deploy it?
App.js
...
- 21
0
votes
0
answers
38
views
Using @material-ui/core/Dialog to create custom alerts
I'm pretty new to using React Js and I am wondering how people with proper React JS experience would consider this code. Are my function names correct, am I following best practices, also does it seem ...
- 9
1
vote
0
answers
242
views
Detect Idle Time in React and JavaScript
I'm creating a functionality that detects idle time for an app if there's no activity within an hour. It works ok but I'm not sure if the approach to handling inactivity is correct? and how do I make ...
- 133
0
votes
1
answer
38
views
Rendering a read-only form from multiple sets of structured data, use of useState and useEffect
This fairly simplistic working example covers:
Handling multiple sets of data without code repetition
Fetching data and using useEffect to process the output when completed
Changing from loading ...
1
vote
1
answer
41
views
Reactjs Component Reusability
I am working on a project in react. Where most of the data on different tabs have a table. So I design the "TableItems" component and passed the data according to the component. Right now ...
- 11
0
votes
0
answers
56
views
Highlighting text with custom colors based on many regex
After quite a few attempts I've got a working solution with a Highlight react component. I'm not sure the algorithm is very clean or efficient mostly when it comes ...
- 121
1
vote
0
answers
45
views
Back navigation handling for web app
I need to implement back navigation handling on multiple pages of my react application. Currently I have added an alert on when the browser back button is clicked. I would like to optimize my code and ...
- 149
0
votes
0
answers
29
views
How can I simplify the way of returning my arrays (react)?
I am new to React and I wanted to ask, because I think my code is way too redundant, is there any way I could improve my code ? Or I'm being paranoid about this?
Below is a little part of my code : (...
- 1
0
votes
0
answers
15
views
What would you do to make this React form + Formik component more readable?
I created a simple page with a react form using formik and YUP. As i need to load data to populate dropdown fields before the page is loaded, i call some apis using react-query lib.
I noticed the form ...
0
votes
0
answers
33
views
Making a global file for all styled components in a project
I am trying to put all different styled components into /components/styles directory.
But these styled components are packed into an object called ...
0
votes
0
answers
24
views
Unit test for a user search React component
I am trying to improve myself in unit test. Here is my code and test. Should I define mock function? I felt like I was controlling too many details. Is there a better way to write this?
Component:
<...
- 11
3
votes
1
answer
62
views
Simple memo game project
I created my first React app with Redux and this a simple memo game with possibility to select difficulty level. I am new in React world, so it would be great if you review my project :)
Project ...
- 33
3
votes
3
answers
89
views
Display random simpson quotes
I'm new to Typescript though I've got a few years experience with plain Javascript. This is the first full program I've built in Typescript using Next.js. I'm just curious about areas where I can ...
user265275
2
votes
1
answer
24
views
Set components' visibility based on global state
I'm building a game interface that has the following user flow:
The user lands on one of the game's URLs (eg. www.name.com/game1), first gets an "intro" ...
1
vote
0
answers
24
views
React typer component
I'm fairly new to JS and have been learning react this week. Struggling to properly understand the useEffect and useState but ...
- 301
0
votes
1
answer
125
views
Design a kanban board in reactJS
Attempting to write a simple Kanban board in ReactJS. Omiting the css code, mostly wanted some advise on best practices in the ReactJS code itself.
...
- 175
0
votes
0
answers
64
views
"Select dropdown" with state abstracted in reducer
I have created a Select Dropdown component with its state abstracted in the reducer. I am just updating this collective state using reducer actions and handling the side effects via ...
- 1
1
vote
1
answer
76
views
first React project - Lights Out game
I am working my way through a React tutorial on Scrimba (I am not finished yet). I got to a certain part that inspired me to try a project on my own. I made a game of Lights Out. If you've never heard ...
- 161
3
votes
1
answer
175
views
1
vote
0
answers
202
views
Multi-step form in React + Formik
I did a multi-step form. I only learn how to build applications, and would like you to check my code out, whether everything is done well, and so on. PropTypes checking was not implemented ...
- 11
0
votes
1
answer
116
views
Zodiac sign component for a React.js astrology project
I'm working on an astrology project, and I have a component for each sign:
...
- 283
1
vote
1
answer
42
views
Theme handler with React
I've just created a theme handler with React.js.
Could my Theme component be polished and improved a bit ?
...
- 109
1
vote
1
answer
64
views
Multiple grouped value select component
I've been designing a React component to select countries that a user has visited, grouped by continent. This component is a part of larger project but is relatively self contained. This is my first ...
- 63
1
vote
0
answers
232
views
Drag-and-drop file upload component
I've tried to make a custom file upload input. The goal was to just have a nicer looking file input compared to its unaltered version.
One thing I don't like is the CSS. I don't like altering the ...
- 197
1
vote
0
answers
27
views
ReactJS low re-rendering performance of the component
First of all, for explaining the issue better and avoid pushing long code here, I'll post the links of the files from repository.
I have a feature simulation of the game that I am making a tools/wiki ...
- 11
2
votes
1
answer
2k
views
React app that uses hooks and shows a random image every two seconds
React beginner here. I'm practicing state and hooks, and I wanted to create a small app that every two seconds fetches an image URL from a service (that returns random images) and shows the returned ...
- 145
1
vote
0
answers
33
views
Using React Native to implement Conway's Game of Life
I'm using React Native to implement Conway's Game of Life as a mobile phone app. So far I've implemented the game logic and a main screen with an embedded GLView component where the game board is ...
- 31
2
votes
1
answer
206
views
1
vote
1
answer
62
views
React - Component rendering weather data
Background:
Hello, I'm a student (since 2 months) and I've created a small MVP of a weather application. So now I'm refactoring my code because it looks hideous and it is hard to work with.
The ...
2
votes
0
answers
68
views
To-do application in React
I am new to react and I tried to implement a TODO application using react state and props. I need somebody to just review the code and suggest improvements in the code. Currently I have not added any ...
- 21
0
votes
1
answer
204
views
React code that controls user permissions
I have this code that controls the user permissions provided to a user. In my case, I constructed a simple example of CRUD. When the admin checks the boxes, it will grant the user access to perform ...
- 115
3
votes
1
answer
74
views
Proper way of using redux and props
I made a weather app in react and redux for an interview. The response was that I didn't use redux properly, and that it has unnecessary props. I'm not sure what they meant.
The app is on github https:...
- 33
3
votes
0
answers
70
views
Cryptomarket data visualization
For a hobby project I want to visualize the current crypto market in bubbles. The idea is to clone cryptobubbles.net. I've already made a prototype at the moment, but the frames are on the low side. ...
0
votes
1
answer
41
views
Check in/out cards
putting the if-else block outside of a function looks clutter to me, should I just put it inside a function and then inside the useEffect ?
Purpose of the if-else block: Render the cards base on the ...
- 101
1
vote
0
answers
28
views
Typescript React-Native Component Dimension Hook
I did a lot of research trying to find a React Native component which could reference its own dimensions in order to scale different elements in its style, but could not find any solid examples. I ...
- 111
0
votes
1
answer
2k
views
React - Display current time using useState, useEffect
I am learning about hooks, so I try to write code that display current time.
I had comment in each line of code the reason I write it. So:
Am I understand right?
Is there any bad practice?
What need ...
- 121
0
votes
1
answer
255
views
Listing the range from A-Z with special characters in JSX
For generating a list of characters, I currently use a static list, 2 components and some unclear conditional renders.
...
- 707
4
votes
1
answer
255
views
Reduce multiple re rendering of components in React
Following is my working application that contains a Search Container, a Sorting Container and a listing Container.
Based on Search and Sort the listing data changes in the listing container.
The ...
- 93
0
votes
0
answers
226
views
Obfuscate email React component
I've written this Email component which obfuscates the email until the user hovers over it:
...
- 403
1
vote
1
answer
41
views
