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.

Filter by
Sorted by
Tagged with
1 vote
0 answers
17 views

React wrapper for Flatpickr, a datepicker library

...
Sayaman's user avatar
  • 341
1 vote
0 answers
17 views

React Note App with context and reducer

In my React learning journey, I wanted to create a Note app following the SOLID principles and use as many hooks as possible to grasp things in React. If you can review my code and improve it, it ...
Crehera's user avatar
  • 41
1 vote
0 answers
31 views

caching and rendering blog posts in markdown in react

I'd like to know if I'm doing this badly or involving any antipatterns. Masterlist.json contains a list full of all of the posts that exist and should be fetched on the page. Post metadata is ...
shr4pnel's user avatar
1 vote
0 answers
52 views

Better way to parse data from nested JSON in Javascript/ NextJS

The nested JSON file contains names of US states and corresponding cities. City.json ...
aries0152's user avatar
  • 183
3 votes
1 answer
59 views

A tutorial project for learning React - Chat app

I am trying to learn React basics and completed a chat app. My main purpose was to create user-specific text areas and preserve the draft when changing between people. Beforehand I had some trouble ...
Crehera's user avatar
  • 41
0 votes
0 answers
49 views

Debouncing user query in React (NextJS)

Minimal React + debounce implementation. The user input is used to filter against randomWords directly, nothing asynchronous. React re-renders created duplicate ...
eloy's user avatar
  • 43
2 votes
0 answers
200 views

Multi Step Form using React

I recently completed the Multi-Step Form Challenge on Frontend Mentor using React, and I'm eager to receive constructive feedback on my code. I've put in a lot of effort to make the form functional, ...
Ultimate's user avatar
  • 133
1 vote
0 answers
110 views

Simple Table With Collaborative Editing

The following is my React code to create a simple app containing a table which can be edited by multiple people at the same time. Each client connects to a WebSocket via a custom hook. The WebSocket ...
muell's user avatar
  • 11
0 votes
2 answers
63 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: ...
code writer 3000's user avatar
1 vote
0 answers
126 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 ...
grayQuant's user avatar
  • 232
0 votes
0 answers
124 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 ...
M0nst3R's user avatar
  • 213
0 votes
0 answers
21 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 ...
Lofton Gentry's user avatar
1 vote
0 answers
50 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? ...
Salvius Fernandes's user avatar
1 vote
1 answer
203 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 ...
learner's user avatar
  • 21
2 votes
0 answers
655 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 ...
Robo Robok's user avatar
1 vote
0 answers
32 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: ...
code writer 3000's user avatar
1 vote
1 answer
147 views

Function component wrapper for the js-year-calendar widget

I have this class component from the rc-year-calendar library. ...
Helder Batalha's user avatar
2 votes
0 answers
213 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 ...
anonjay001's user avatar
0 votes
0 answers
39 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 ...
charbs29's user avatar
1 vote
0 answers
476 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 ...
Joseph's user avatar
  • 133
0 votes
1 answer
43 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 ...
Dalhousie's user avatar
1 vote
1 answer
43 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 ...
Hamid Shah's user avatar
1 vote
0 answers
81 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 ...
anup's user avatar
  • 149
3 votes
1 answer
70 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 ...
Maciek's user avatar
  • 33
3 votes
3 answers
96 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 ...
user avatar
2 votes
1 answer
25 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" ...
HunterListInsight's user avatar
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 ...
Lewis Morris's user avatar
0 votes
1 answer
146 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. ...
noi.m's user avatar
  • 175
0 votes
0 answers
72 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 ...
Abhinay's user avatar
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 ...
apex2022's user avatar
  • 161
3 votes
1 answer
306 views

Unit test for a React click-counting component

Take this basic component using state: ...
user8758206's user avatar
1 vote
0 answers
236 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 ...
Alex Kor's user avatar
0 votes
1 answer
157 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: ...
DBWeinstein's user avatar
1 vote
1 answer
48 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 ? ...
Gibberish's user avatar
  • 109
1 vote
1 answer
67 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 ...
Zac L's user avatar
  • 63
1 vote
0 answers
280 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 ...
Nate Thompson's user avatar
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 ...
Enes Ceylan's user avatar
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 ...
sekmo's user avatar
  • 145
1 vote
0 answers
37 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 ...
Ste1891's user avatar
  • 31
2 votes
1 answer
223 views

Carousel in react

I implemented this carousel component in react: ...
george's user avatar
  • 21
1 vote
1 answer
70 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 ...
Jonathan Manner's user avatar
2 votes
0 answers
70 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 ...
user749598's user avatar
0 votes
1 answer
276 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 ...
Mohammad Khan's user avatar
3 votes
1 answer
77 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:...
s-e1's user avatar
  • 33
3 votes
0 answers
82 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. ...
Tom van den Bogaart's user avatar
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 ...
yongchang's user avatar
  • 101
1 vote
1 answer
44 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 ...
Austin Brown's user avatar
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 ...
Tan Nguyen's user avatar
0 votes
1 answer
299 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. ...
Bas's user avatar
  • 699
4 votes
1 answer
266 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 ...
swapnesh's user avatar

1
2 3 4 5