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
0answers
9 views

Passing global state and state-modifying functions to child elements in a React app

I'm only three days into React, so please forgive my ignorance. I'm working on an application in which you can design something consisting of various parts. The interface has a list of items in one ...
0
votes
1answer
44 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 ...
0
votes
0answers
30 views

Crud operations for profiles with React hooks

I'm creating a small app to get familiarize with React. I'm trying to follow the pattern introduced in this Kent C Dodds article. But I have more states than the article. Here is my initial state <...
0
votes
0answers
24 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. ...
0
votes
0answers
10 views

what is the proper way to use the useEffect cleanup function with firestore async/ await [closed]

I am learning React.js and I am trying to use the useEffect hook with a clean up function to read data from firebase firestore. I found about the AbortController and I was wondering how to use it ...
0
votes
0answers
21 views

Overly complex code for a seemingly simple idea. Fulfilled promises returned instead of values

I have a React hook "useFetchSales" that fetches all documents from the "sales" collection in Firestore: ...
0
votes
1answer
100 views

How to deal with nested callbacks in a clean way?

I am currently migrating some code from class-based components to function components using hooks in React. Where I have come across a piece of code that works as expected but there are 3 Axios calls ...
3
votes
0answers
38 views

Use formats phone numbers into XXX-XXX-XXX

I created an input that accepts and formats phone numbers into XXX-XXX-XXX. The user should be able to type numbers and the dashes should insert themselves automatically. Example #1: The user types 1 ...
4
votes
1answer
79 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 ...
0
votes
0answers
19 views

Encapsulation React state

I defined the following context provider: ...
0
votes
0answers
17 views

TypeScript + React Native: Button Stepper Component

I built a ButtonStepper component and it's sharing quite a bit of the same logic, so I was wondering if it could be refactored better. It's sharing quite a bit of ...
0
votes
0answers
25 views

How can I call React useRef conditionally in a Portal wrapper?

I am attempting to make a simple Portal wrapper that does the following. Can render multiple portals on the same view Can render multiple portals by targeting parent ids. This cannot be done by ...
0
votes
0answers
33 views

Single incrementCounter for 2 form submissions

Everything works perfectly fine. However, I just want to know if there's a way for these codes to be shorter and non-repetitive and how? I have these increment counters to update the stocks after ...
0
votes
0answers
33 views

Random sample items for testing

This function (in a React web application) code takes a random sample of items to test in each test function, for end-to-end testing: ...
0
votes
0answers
17 views

This custom hook to reproduce the callback functionality of this.setState

This StackOverflow answer gives a good suggestion for reproducting the 'after state updates, fire this callback' functionality that the old class component setState function had, but that the new ...
0
votes
0answers
21 views

Setting a complex component via useEffect and useState?

I have a component that I am updating from running a plain function on every render, to one that only runs when some components update: ...
0
votes
0answers
21 views

React component to display emojis from different sources

I'm looking forward for any feedback to help improve in any way this React component that will render an emoji from GitHub, Twitter or OpenEmoji: ...
1
vote
1answer
24 views

Find coordinates of neighbors out of given coordinates

I'm programming a checkers game in typescript. I'd like to explain some important details to understand how the following code works. In my game coordinates are a string, like "b4". I want ...
0
votes
0answers
45 views

React Typescript Project Using Traditional OOP Patterns

I'm writing an app meant to have similar functionality to LucidChart - drawing shapes/diagrams. I'm using React with Typescript (Create React App) and am trying to follow OOP/polymorphic patterns I've ...
0
votes
1answer
41 views

My Theme Switcher App has a need to be criticized

I am a student who wrote logic to theme switcher, but I don't know if everything is ok. I want professionals to estimate my code and will say what is probably mistaken. I accept all recommendations ...
1
vote
0answers
34 views

Dispatch and Listen Action with Hooks in React (without Redux)

I wanted to share actions through different places in the component tree like: ...
0
votes
0answers
40 views

Multilingual React Application using typescript

I'm learning react-typescript programming. Developed a sample application, which supports in multi language. github Souce: https://github.com/phanivaranasi/sownikbackend.git Review the code and share ...
0
votes
1answer
37 views

React debounce using Lodash

I need people who have experience with React to review my code. I want to make a debounce using Lodash. import debounce from 'lodash/debounce' ...
3
votes
1answer
64 views

A React - Typescript custom hook for any request (GET, POST, PUT, DELETE) to my back end

I'm building a full stack exercise app and some of my objects include routines, exercises, exercise sets etc. Instead of writing out specific get, post, put and delete requests for each resource, I ...
0
votes
0answers
71 views

Obfuscate email React component

I've written this Email component which obfuscates the email until the user hovers over it: ...
0
votes
0answers
25 views

React children props array type predicate

Component: ...
-1
votes
1answer
73 views

Simplifying and optimising function logic [closed]

I asked the same question on StackOverflow but was told to instead ask here since it was better suited. I have a function that I implemented. It is doing a lot of heavy lifting. I would like to ...
1
vote
1answer
27 views

abstract navigationOptions react navigation

I have many stacks with the same navigation options, how do I abstract the navigationOptions part to have it repeat in all my stacks? ...
2
votes
1answer
91 views

React-based resizable sidebar

I am an experienced developer, but new to the react and the javascript world. I am trying to create a resizeable sidebar in react(Please see the full code and demo here) for a personal project. ...
2
votes
2answers
66 views

Calling functions if certain strings are in an array

I have these few helper function that are used to check if the string in the given array is present and if the certain steps are present and then only have the other function fire. The reason I ...
1
vote
1answer
19 views

Using Redux state in React component

I am using Redux Toolkit and have a general-purpose ui-slice that I use for UI states that I need globally. In particular I have few components that need to know ...
2
votes
0answers
72 views

Fetch in JavaScript, but less messy?

I'm trying to separate the fetch logic from the component, but, due to the nature of async/await functions I have to write an async function to call other async function and I wanted to know if that's ...
0
votes
0answers
16 views

nested drop down for blog posts

I wrote this component to be a drop down for blog posts. The index prop is a PostIndex object returned from a query in the ...
1
vote
1answer
30 views

React component with axios calls

...
2
votes
1answer
37 views

ReactJS link with conditional CSS classes

I'm starting to learn React/NextJS and find the way to write conditional CSS very ugly compared to VueJS. I'm curious if someone could look over this code snippet and guide me in the right direction ...
0
votes
0answers
27 views

REST API in react native

In a recruitment process, the company gives me a project to do in react native. I finished all the tasks. But company gave me a feedback and said that your project was good, but you did not apply best ...
2
votes
1answer
74 views

TypeScript, React and Node app to get 'games' data from a database and display them on a frontend

This is only one of the first apps I've built with Node, React and TypeScript. I was wondering what could be made better. This is at this point the best I've been able to come up with, but I'm not ...
0
votes
0answers
17 views

Mutating the shopping cart using redux-saga

I am trying to implement a shopping cart using redux-saga. The following code is working fine. But it does not look right to me. I am mutating the cart whenever I am adding the product. Let me know if ...
-1
votes
1answer
18 views

How do I distinguish the difference in naming and file structure between components and mobile components in React? [closed]

Here is my example structure: . ├── App.jsx ├── index.js └── src └── components ├── Button.jsx └── Header └── Header.jsx Question: ...
4
votes
0answers
50 views

React - Show more and search functionality

I created a rough implementation of a component that lists stuff based on data has the option to enable searching for that data. I've not used React all that much so it's probably a terrible way to ...
2
votes
0answers
23 views

File Picker Component - React

Created FilePickerComponent recently. I'm new to React/Web development. Could you please help reviewing this code - ...
0
votes
1answer
64 views

React useState,useEffect - save variables to local storage [closed]

I'm new in React and state hooks.I'm trying to make a website about creating booklist and save it to local storage. Also uploading image to cloudinary. My problem is ; when i trying to save cloudinary ...
2
votes
0answers
88 views

Create a map where countries can be selected using react-leaflet

I've only just started learning javascript and decided to try and make a simple app where individual countries can be selected, highlighting them, and the name appearing in the top corner. The code ...
2
votes
1answer
37 views

Show react component given a condition

I want to show the battery icon given the status provided in props. I am trying to keep it simple but without writing too much code, i.e.: . ...
2
votes
1answer
48 views

React quiz app with Redux, React Router

https://codesandbox.io/s/react-quiz-kb1xb I was wondering what could be improved upon it. I am looking at how it's using Redux and how it's also using hooks and I don't really see anything wrong with ...
0
votes
2answers
118 views

How to refactor and reduce complexity of this code

code climate tells me this block of code has a Cognitive Complexity of 7 (exceeds 5 allowed). Any ideas how I would refactor this to reduce complexity? ...
3
votes
1answer
50 views

Simple registration form with validation

I am really new to React and I worked on some challenges. I need to mention I did most of the stuff on my own without much dependence on the internet beside what functions do. I'd like to know if I ...
1
vote
0answers
27 views

What is the best way to pass an argument from one subcomponent to other subcomponent?

Hi I was just asked by stackoverflow to move this question into this forum (https://stackoverflow.com/questions/67685433/how-to-design-the-react-component-properly). Hi I am pretty new to react and I ...
0
votes
2answers
117 views

Set state on field change

I have a contact model, on change I set the state of the contact object, how can I make the below function more readable? The ...
1
vote
0answers
32 views

Working React App to display public Github Repositories of a user

Description of the App:- A React app that shows the public Github repositories of a user. The app shows an input field where we can enter a Github username and a submit button. {It provides users the ...

1
2 3 4 5
12