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.
149
questions
3
votes
0answers
30 views
Prettified GridView: is this JS code concise?
I been writing code for my company for years and there is never any constructive criticism for what I do. I am the only developer here and I would appreciate your opinion on this web page I made. It ...
3
votes
0answers
21 views
React.js component to lazy-load image
I'm trying to design a better solution for img srcset with lazy load.
Below is the code from the component responsible for lazy load img,
maybe someone has a better way to achieve this effect.
Full ...
1
vote
2answers
55 views
Check which state is activated and render the JSX accordingly
Just wondering how I can go about doing this more efficiently/make it more visually appealing to the user?
...
1
vote
0answers
28 views
Beginner React App - handling different components with the same variable
I've made a simple app that shows if the term entered into the search bar is present in a number of common English words.
This is the stackblitz: https://stackblitz.com/edit/react-mostusedwords
Note ...
1
vote
0answers
37 views
React Native form for entering one-time password [closed]
Here is the React Native code to optimize: it's an OTP form. I want it to be as small as possible.
...
0
votes
0answers
25 views
React language localisation
I have made this Language Localization for React Native (it can also work for react js). It works by getting the device language. The user can also manually change it.
...
5
votes
2answers
196 views
Calculator app in React
This is a simple calculator app that involves entering two numbers and allowing them to be editable and swappable. Calculations are done on the numbers, so the calculations should only be done when ...
4
votes
1answer
59 views
Reddit style comment chains in React
This isn't meant to be a fully-featured anything, isn't meant to involve any sort of api interactions. It's just meant to be a proof-of-concept of how I could implement nested reddit-style comments.
...
2
votes
1answer
45 views
Highlight strings that match a search term
I'm writing a ctrl+f function so to speak in React that allows a user to search for a term in a list of words, and if the term matches any of the words in the list then it highlights it. To do this, I'...
1
vote
1answer
54 views
Implementing a Treeview component using React
Today after watching a getting started course about React, I tried to code my very first React component, a "treeview" as the title says. It does work, but as a newbie I know there are many ...
4
votes
0answers
75 views
React - pomodoro clock
I'm looking for some feedback on a pomodoro clock that I recently wrote with React.
I'm pretty new to React and coding in general. I followed a couple of online courses, but I'm mostly self-taught. ...
0
votes
0answers
26 views
Using multiple dropdowns that have a single source of options
This code works as is but I'd like to learn if there's any way it could be simplified or cleaner looking.
There are 3 dropdowns. Each dropdown's list of options are based on a single array of options....
3
votes
1answer
44 views
Code for printing list in React
Below is an implementation of a React app printing list. Are there any areas of improvement/suggestions in below code base
...
4
votes
2answers
111 views
React.js calculator
I have a calculator (in React) and I wonder if the way I did is is good or what I could improve. I wanted to do it like the iphone calculator (you dont only see results when you press =) and I feel ...
1
vote
0answers
24 views
Allows the use of Redux to manage the state of a grid with the Kendo React Library
I wanted to use Redux to manage the state of my KendoUI components such as the grid. The online examples from Telerik do not seem to contain clear information on how to do this, so, I started to ...
1
vote
1answer
35 views
React - Bottleneck Textinput / Filtering
I've got a big react app (with Redux) here that has a huge bottleneck.
We have implemented a product search by using product number or product name and this search is extremely laggy.
Problem: If ...
1
vote
0answers
14 views
React tabbed template
I made this simple tabbed app template and one thing in particular I am not sure about is my creation of a pageMap object. The thinking behind it is that you can ...
1
vote
0answers
22 views
Propagating data in React
I'm learning React recently, but I've been having some issues regarding propagating data from component to component. My general situation is: I have a textarea ...
0
votes
0answers
530 views
Flexible React component that displays different sets of data from the API
I believe this is a common scenario but my implementation of it looks weird. So how would be go about reusing components for different data? For example, this page, https://etherscan.io/blocks and ...
2
votes
1answer
3k views
TypeScript implicit 'any' type with computed property key
(irrelevant code removed for demo purposes)
I am new to using TypeScript and I have this React component which has an object literal inside the component, which I'm then accessing using a computed ...
2
votes
0answers
25 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
32 views
Simple lyrics application
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
28 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?
...
3
votes
1answer
26 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
59 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
658 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
695 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 ...
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
73 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 ...
1
vote
0answers
30 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
762 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
49 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
0answers
13 views
ReactJS code that allows at most one profile pic to be selected
I am making a profile picture selection screen, basically you select a picture pic1, if another picture pic2 is selected, then we cancel the highlight of pic2 and highlight pic1. Here is my code right ...
1
vote
0answers
44 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
235 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
88 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.
...
2
votes
0answers
185 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 ...
1
vote
1answer
887 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
113 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.
...
2
votes
0answers
53 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
350 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 ...
1
vote
1answer
531 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 ...
2
votes
1answer
58 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
91 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
86 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.
...
3
votes
2answers
338 views
Rendering plain text with paragraphs and line breaks as HTML
I have text inside a variable that I need to separate in paragraphs, and at the same time respect the manual breaklines.
This is my code:
...
2
votes
1answer
5k views
How to set state of multiple properties in one event handler (React)
Pretty straight forwards really...I know that it's usually bad practice to repeat your code so I'm wondering how I could join handleAuthorChange() and handleContentChange() into one method. I guess it ...
3
votes
2answers
81 views
React-based weather app
I am an experienced developer but pretty new to React. I wanted to go on my own and build a simple little weather app that updates the image, tempature, and description of each day when you click on ...
2
votes
1answer
44 views
Create an Array of Objects for Patch Notes in React
I was looking to get some reviews of my code, so I can improve my writing. Functionally it works the exact way I want it to based on my patch notes .md file. I'm open to all suggestions for improving ...
