Questions tagged [react.js]

React is a JavaScript library for building user interfaces. It uses a declarative paradigm that makes it easier to reason about your application and aims to be both efficient and flexible.

Filter by
Sorted by
Tagged with
0 votes
0 answers
28 views

Construction Permit Web App

I have a Next.js + Node.js + TypeScript + Tailwind + tRPC project whose objective is to allow a construction manager to figure out what permits are required for his renovation based on if it's an ...
Jason's user avatar
  • 1
-3 votes
0 answers
31 views

It is good practice to use the setState callback to ensure that the state is updated [closed]

I have a situation where I am fetching a list from the backend. For each item in the list, I need to display a dropdown, which also needs to be fetched from the backend. I then need to check if the ...
Programmer's user avatar
0 votes
0 answers
28 views

How can I optimize ChatInputBar component in react/next?

I have a chat input bar component where user can type text messages, emoji as well as select images and then send it. Currently it's a bit messy as I only finished working on it, so I guess what I can ...
Andrian's user avatar
-3 votes
0 answers
29 views

How do i change this code to better, using ReactJS with useMemo hook? [closed]

This is a good code practice? ...
Dev Marcell's user avatar
2 votes
1 answer
96 views

How to manage array of states effectively?

I have a working code to have 2 search bars with dropdown suggestions, selectable by both mouse and arrow keys in TypeScript and Fresh/Preact. In there I have to explicitly declare individual hooks ...
Ooker's user avatar
  • 131
0 votes
0 answers
27 views

How to shrink a react function code with firebase set/update operations

I have a function which does firebase set and update operations, but it looks messy. I want to shrink it but also make sure that it works the same. Any ideas? ...
Andrian's user avatar
0 votes
0 answers
22 views

Seeking Feedback on React Authentication System Implementation

I've developed a React authentication system for my application and would like to receive feedback on its correctness and potential improvements. Below is an overview of the key components and ...
Avishka Dambawinna's user avatar
1 vote
0 answers
39 views

React based Quiz Website

I have recently worked on a quiz application using the MERN stack. The application incorporates various features such as user authentication, quiz creation, scoring functionalities, and data ...
Ultimate's user avatar
  • 143
2 votes
2 answers
62 views

Minesweeper in React -- design for state management/data flow

I've pasted here a basic implementation I've done of a Minesweeper game. This is not the full functionality, only the populating/revealing of squares. The idea is that the user inputs ...
nickhealy's user avatar
  • 155
1 vote
1 answer
71 views

Basic login form in React.js

I have made a very basic login/registration form in React.js. The inputted data is send to a Java Spring Boot Rest-API to create an user or to authenticate using JWT. But in this question I want to ...
O'Niel's user avatar
  • 197
2 votes
0 answers
55 views

React draggable sliding panel

I'm building a sliding bottom panel as a React component, adapting Phuoc Nguyen's excellent draggable element tutorial. It currently looks like this: The expected behavior is: User taps on button to ...
Jimmy's user avatar
  • 21
2 votes
0 answers
27 views

React/Typescript/Redux Tool Kit work flow for Category component

I'm quite new to React hooks/Typescript/Redux. I'm building a mock e-Commerce website for my portfolio. I've got a component (Category) working and rendering data with no issues, it follows the below ...
Corey's user avatar
  • 21
0 votes
0 answers
19 views

Reusable HorizontalItemList component in React and Typescript

I'm new to React and need to display a horizontal list of items at several places in my app in differing sizes and styles. This is a utility component I came up with: ...
csmathhc's user avatar
  • 153
1 vote
0 answers
26 views

React memory game

...
Sayaman's user avatar
  • 415
1 vote
0 answers
21 views

React wrapper for Flatpickr, a datepicker library

...
Sayaman's user avatar
  • 415
1 vote
0 answers
21 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
0 votes
0 answers
25 views

React equivalent to Blazor singelton pattern

I'm refactoring a code-base in React, and our design team have decided to move a button out of its usual flow and instead to a component that's very much not a descendant of the logic. I'm relatively ...
BM-'s user avatar
  • 161
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
79 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
64 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
1 vote
0 answers
48 views

Gauge animation in CSS

Not sure how to show this here, but the stripes of the gauges shown below move from left to right: The gauges represent a pokémon's base stats (here, Bulbasaur). The length of each gauge is ...
eloy's user avatar
  • 43
0 votes
0 answers
17 views

CSS/Tailwind to display pokémon details

The final product is the following pokédex page, here for Bulbasaur: the blurry sprite is just a placeholder the perspective effect disappears when the mouse hovers over the text Any place where I ...
eloy's user avatar
  • 43
1 vote
1 answer
42 views

Icon styling in Tailwind/React

This is a React icon component, with a few Tailwind classes. This icon component looks as follows in the UI. The name LongIcon is to differentiate with smaller, ...
eloy's user avatar
  • 43
0 votes
0 answers
19 views

Centering UI elements with flex, in React

I'm using React and Tailwind to generate cards like the example below. I was hoping to get feedback on the CSS rules I used, the order of the Tailwind classnames, and the HTML structure. I'm using <...
eloy's user avatar
  • 43
3 votes
0 answers
65 views

Custom AutoComplete component with Typescript Generics

I've created my own AutoComplete form element based on @nextui-org/autocomplete to be able to use it along with react-hook-form. ...
kursat's user avatar
  • 131
1 vote
1 answer
57 views

How to encapsulated javascript code using imutable method?

I have this code, but I need to return pure functions instead the mutating functions. Is it possible? Perhaps using OOP? I don't know how to improve it. I tried to return the values in each function, ...
Wesley Souza's user avatar
1 vote
0 answers
18 views

Is this component file format for react native good?

I'm new to React Native. I wonder if the following project file structure is ok to use for the rest of my project. Here is an example of component: ...
João Hamerski's user avatar
4 votes
1 answer
72 views

access arrow data

I am fetching arrow tabular data from an API. The content-type of the response is application/vnd.apache.arrow.stream. In my react code, I am trying to read the ...
Deb's user avatar
  • 41
1 vote
0 answers
47 views

Simple Todo app using latest React and TypeScript

I would like to ask your advice on the frontend code of todo app. Main functionalities: The app has authorization and authentication using backend. The CRUD functionality for managing tasks What may ...
J.Olufsen's user avatar
  • 161
1 vote
1 answer
51 views

Further memoize context value in react?

This is a contrived example of a question that came up in code review the other day about memoizing context values in React. Let's say I have a hook which returns a memoized value of an expensive ...
Asleepace's user avatar
  • 145
1 vote
0 answers
69 views

Variable button increment picked from an input:range in React 18

I'm a newbye in React. I created some simple Components to practice. For now, I'm using class Component (I want learn either class COmponent or function COmponent). I would know if I projected ...
Nick's user avatar
  • 111
0 votes
0 answers
30 views

News Website using react and next.js implementation

I'm looking for review and feedback on simple news website built using React, next.js, tailwind and nextui. I'd love to get your feedback on file naming conventions, project structure, ways I could ...
sazr's user avatar
  • 191
1 vote
1 answer
75 views

Tracking people's check-in and check-out at an event

I have some logic that helps me calculate the data for a summary of an event, which should be rendered as something like this: ...
Andrey Namikaze's user avatar
2 votes
0 answers
241 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
  • 143
1 vote
0 answers
18 views

Displaying 2 separate home pages based on authentication status

I want to have 2 separate pages at the root URL for logged-in users and logged-out users. (at "/"). After advice on this sub, this is what I've come up ...
Hel's user avatar
  • 11
1 vote
0 answers
112 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
64 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
0 votes
0 answers
73 views

Typewriter component that updates span one char at a time in Next.js + TailwindCSS

I have created a Typewriter component that animates a span to display text for my portfolio website. The goal was to have an array of strings that are cycled through and an animation that types them ...
Asad Koths's user avatar
1 vote
0 answers
150 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
151 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
1 answer
195 views

Spring Boot Account API with React Frontend and Identicon Integration

I have recently been exploring React and Spring Boot, and I would greatly appreciate your feedback on a practice application that I have developed. The application consists of a Spring Boot backend ...
thebluepandabear's user avatar
0 votes
0 answers
23 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
0 answers
35 views

Good way to coding on React-Native?

I'm new on this field of coding, and I start to create by myself a project for iOS and Android. I'm a bit lost of how I supposed to organize my code, I saw different persons on YouTube doing their ...
Dorian's user avatar
  • 11
1 vote
1 answer
207 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
0 votes
1 answer
32 views

Choose a marker for the map based on the alerts it has

I need help to refactor this code, I think I can avoid the first two functions that filter the array. Also in the third part where I use the result of these two filters: ...
John Alberto López Hernández's user avatar
2 votes
0 answers
739 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
2 votes
0 answers
779 views

React/Next.js code for a "back to top" button

Pretty new to React/Next.js. This is for a "back to top" button. Any thoughts on whether this can be improved? I haven't really got my head around when ...
Matt's user avatar
  • 21
1 vote
0 answers
33 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
152 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

1
2 3 4 5
12