Stack Exchange Network

Stack Exchange network consists of 175 Q&A communities including Stack Overflow, the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Visit Stack Exchange

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.

2
votes
0answers
14 views

Access object in an custom attribute efficiently

Im trying to access the attribute directly in the parent component, that why Im using the ref method. here an example of why Im trying to achieve: https://...
1
vote
1answer
16 views

API driven search causing jaggy re-renders

I am fairly new to React, but I have been reading a lot of the official documentation and trying to do things correctly. Background: I am building a simple lyrics application in ReactJS, it looks ...
1
vote
1answer
20 views

Different class name based on condition in React

I have a very simple component, which should be styled differently based on the passed condition. I wonder if there is a better approach to refactor this piece of code? ...
-2
votes
0answers
15 views

How to send data from dialog back to parent container with react? [closed]

I have a react-big-calendar (The parent container), I have also a select which, the events of the calendar are fetched according to this select ( doctor name ) and I have a button when I click on it, ...
1
vote
1answer
18 views

Data models with mobx-state-tree for multiple views

Background: I'm trying to create functionality that would display two layouts of the same data. The position and size each data record must be independently saved per layout and each layout will have ...
-3
votes
0answers
40 views

What is correct usage of useContext hook to replace Redux/Thunk [closed]

I am not sure how to use new React feature useContext hook to asynchronously call external resources . I want to replace usage of Redux/Thunk with useContext. What is best practice. I wrote some code ...
2
votes
1answer
42 views

React component to animate planets on a canvas

I wrote some JavaScript to generate some graphics on a canvas, on a regular HTML page. I now want the same code to run in a component that is part of a React app. I've done this: ...
1
vote
0answers
18 views

Extract useMemo to its own custom hook

I wanted to know if the useMemo function extracted like this is valid at all. This is a whole component (Sorry for the imports) that uses useMemo to get a data that is grabbed from the server using ...
3
votes
1answer
24 views

Babel code in React component to display tasks

I'm trying to think of ways to clean up this component in my app so it looks more readable to other devs. This is the best I came up with so far. It's not that bad, but I think it could be a lot ...
3
votes
0answers
38 views

Reusable grid layout for React.js

I have taken someone else's HTML and CSS code for grid layouts and reactified it. When converting the code to React, I tried to make it as simpler. I would like to learn from community, if any ...
1
vote
0answers
57 views

Implementation of Private Route with Auth using react-router and Context API

I'm trying to implement safe routes and checking if the user is authorized using only Context API. I'm also trying to avoid that the user can see a PrivateRoute, ...
1
vote
0answers
29 views

Converting IActionResult to something that can be mapped in JS

I have the following ReactJS unordered list which is generated from answers: ...
3
votes
1answer
27 views

React onDrop function for a task manager

This a working function as part of a drag and drop task manager im playing around with. The function is working fine, but it just looks messy and long to me. I haven't added all the code as I'm ...
0
votes
1answer
93 views

Suggestions for optimising this front end code

I've stumbled across some UI (React.js) code that I've worked out to have a time complexity of O(n^4) (I hope that's right, if not please do correct me). I was ...
3
votes
2answers
86 views

Idomatic way to ignore `finally` block after cancelling network request

In React, it is quite common for me to have something similar to the following. ...
1
vote
0answers
250 views

React Hooks conditional in useEffect

I'm starting using hooks, and I have a specific scenario that I'm thinking useEffectis appropriate for. Essentially what I'm doing is: I have some ...
4
votes
2answers
91 views

Best way to retrieve music metadata from audio files?

I am using the music metadata-browser npm package to retrieve audio metadata from files. This library is being used in an Electron and React desktop app. To get the metadata of audio files, (and add ...
3
votes
1answer
34 views

Sass styling with React components

I have put together a piece of what can be a much larger frontend in Reactjs. I just put together the component that renders to the user a list of airports and hotels as well as a header component. ...
3
votes
1answer
81 views

React code to build shopping cart

I have built a basic shopping cart simulator. All it does is add and remove items between two different basket (i.e. aisle vs basket). While working on the problem I started to think about the ...
1
vote
0answers
19 views

Versatile React component that maps style attributes

I'm creating a versatile component with styled-components that essentially just maps style attributes. I feel my type declarations seem inefficient in getting access to props. Is it appropriate to ...
2
votes
0answers
21 views

Grouping and displaying people by political demographics

I have a function that sorts and groups items inside an array and then adds a corresponding jsx element to the page. I've already refactored it from 100 lines of code to 44, but I'm sure that its ...
2
votes
1answer
65 views

React board game app

I was told to code a board game app using React for a job interview. They told me they chose other candidates to move forward with, so I was wondering on what I could improve. The full code can be ...
0
votes
0answers
16 views

My implementation of page navigation using react-router, babel, webpack

I have written a page navigation using nested navigation in React.js using react-router. The code can be checked out as below, ...
1
vote
0answers
22 views

Conditionally show various video panels

The use case that this code tries to meet is There will be an interview session where the video calling is done between two participants, interviewer(ER) and ...
1
vote
0answers
188 views

Stateless tooltip component using React hooks and ref

What I'm trying to create is a generic tooltip component that I can use anywhere. I decided on a stateless component and the use of hooks and ref. Explanation 💡 Hook, because I wanted to have a ...
0
votes
0answers
21 views

70L React Router

This is a small router for a React application. Router changes the displayed content depending on the current location. Link changes the location when the user clicks on it. navigate changes the ...
0
votes
0answers
33 views

Self-removing modal using react portal

The goal was to use React.createPortal() to render a modal component inside a <div> other than the application root. This ...
1
vote
1answer
33 views

React - am i overusing props or is it exactly how they are suppoused to be used?

After learning some basic concepts of ReactJs I tried to create a form. Now I'm not sure if I'm using props the way they are intented so here is sample of my relevant code: ...
2
votes
1answer
53 views

Form validation function for React

I need to validate multiple input fields using React. I am using a simple if-else block for each input field but I would like to optimize my code and make it better. I feel there can be a better way ...
1
vote
0answers
31 views

React context API design pattern

I created a boilerplate from react-boilerplate. I have removed redux and immutable for use context API and ...
0
votes
0answers
57 views

BMI calculator with React Hooks

I wrote this Body-Mass Index calculator as part of a test. I'm new to React Hooks so I'm not sure whether this is good practice or not. When it comes to the component implementation and the tests, I'm ...
1
vote
1answer
108 views

HTML5 canvas video with React

I'm trying to work HTML5 canvas video into a React application while making the code as clean as possible. What kind of improvements should be made to improve the performance utilizing the React to ...
1
vote
1answer
65 views

React For loop component

This is my React component for looping a component i.e. I don't want to use MAP or FOREACH in React Component's HTML. ...
1
vote
0answers
30 views

Javascript router for React with hooks

So I am learning hooks and context, and I wanted to make a simple router. I wanted a simple API where you can just pass in routes. initialRoute should be optional, ...
2
votes
0answers
141 views

Tic-Tac-Toe with React hooks

I have found similar posts which has some optimizations on Winning-checking logic: React Tic Tac Toe My primary focus for this post is about hook setters being ...
3
votes
1answer
67 views

React.js Nested Nav Bar

This was written for a coding challenge for a company I recently starting working for. I'm looking for any suggestions on how to clean up the code, as well as any issues anyone thinks may occur as it ...
1
vote
1answer
104 views

React table with JSON

I'm pretty new to React and I was working on some JSON data. Now I just to understand basic concepts, so I wrote this little component, but in my eyes it's not efficient. ...
1
vote
1answer
63 views

CSS and React.js for a basic navigation drawer

I am trying to optimize my navigation drawer code. I have tried and followed the BEM naming convention for my CSS although I would like it reviewed with respect to the best practices being followed. ...
1
vote
0answers
558 views

React hook “select all” checkbox implementation

This is a select-all checkbox (and checkboxes that it controls), that's usually found in tables/lists. Two things I'm concerned about: I'm returning elements from a React Hook - is that OK to do? As ...
2
votes
0answers
49 views

Textbox validation component

My intention is to have a component that serves as a textbox wrapper and able to set the error state, error message, and allow the parent to pass a function that sets its local error as I did not see ...
1
vote
0answers
149 views

React Native app screen for booking appointments

I've been building a two-sided (both clients and service providers would use the app) appointment booking app. This is a screen from which a service provider can confirm their profile after having ...
-2
votes
1answer
43 views

Simple conditional operator optimization [closed]

I have a repetitive set of instructions that I would like to optimize. Is there a better pattern to achieve the same goal but with less repetition ? ...
1
vote
1answer
160 views

Recursive react.js navigation menu

I'm very new to React.js and have to start converting an entire website at my work. It's fun, but I'm hoping to get some feedback about how I tackled building this navigation component as I don't ...
0
votes
0answers
19 views

Manage show state of Modal component from inside of component

I work on React apps on my spare time. I try to leverage the concept of HOCs and component reusing. I have some components where I have a form, and I created a component for showing a modal, for ...
1
vote
1answer
78 views

Generating a table based on an array of objects

I have a React component that generates a table based on an array of objects, which gets populated with data in an object. I'm trying to learn as much as I can about React.js / JavaScript. Could ...
1
vote
1answer
51 views

Redux: button click potentially fires 3 action for different reducers

I’m using Redux and thunk, I have a list component ...
2
votes
1answer
57 views

Validating Array before rendering

I am rendering a list from an array of objects. I want to check the correctness of the array before rendering. For that I am using typeof and null. In real situation the list comes from the API. Is ...
2
votes
0answers
75 views

ReactJS Typewriting animation

One of the dream idea to build typewriting in ReactJS. The code seems to be working, still there are something looks not that great in the code 😔 Looking for better solution (best practice) in the ...
1
vote
1answer
73 views

Using a public API to display data

It's a simple app that uses a public API to display data. It works as is, but I'm seeing a lot of spaghetti code that my limited experience can't fix on its own. ...
1
vote
1answer
24 views

Summary page with react-redux: container or presentational component

I'm building a Summary page for merchant activity in a marketplace with react and redux. The application has already a structure where there is a "MerchantContianer" ...