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.
163
questions
0
votes
0answers
23 views
React.js How to make a global win counter? [closed]
I'm making my first card game with React.js and I'm stuck at one point.
How can I display the total win count?
For example, if in this game the computer scored 10 points and won, and in the next 15 ...
1
vote
1answer
24 views
Created a basic User Profile List using an API (React)
I'm relatively new when it comes to programming in React and in JavaScript, but have a surface level understanding of what things do. I've created a basic program that fetches user data from an API ...
1
vote
1answer
29 views
Dynamic social media component w/ dark mode
Note: This is my first post for a code review, so any feedback on what other info would be helpful to post (if any) would be much appreciated!
React component: Social.js
The component has an input of ...
0
votes
1answer
28 views
Merge into an object from two different API calls
I'm working on an app to compare SDKS (their churn and acquisiton rates). I have created an API with two separate endpoints.
The first, compares one sdk to ther other and spits out that data for each ...
2
votes
2answers
30 views
Display element in a grid and conditionally add to redux or remove if not selected
I have some logic on my JSX for an element in a grid, if element is selected, then add to redux, if element is not selected then remove from redux...
is working ok, but I sense a bad smell...
...
1
vote
1answer
36 views
3
votes
1answer
76 views
How can I re-write the conditionals for this button
I've been trying out React for a couple of days and I tried to build a button component with some conditionals. Everything works but I feel like I am not doing it the right way.
Could anyone review my ...
2
votes
0answers
46 views
naming convention for atomic design
please let me know if this question doesn't meet community standard for code review (I will delete it)
Hey, I am probably terrible in naming files, functions etc.
We follow atomic design principle. ...
3
votes
0answers
33 views
React Higher Order Components - export wrapped component or wrap it in parent?
I've been learning about about how to use context, and how to make a higher order component to provide context values through props.
So, I've created my HOC to pass down the props, and it looks like ...
3
votes
3answers
86 views
JSX render method in react
Following is the piece of code which is working fine, but somehow it looks bit odd to me to have a function inside a render method and using it in both conditions. Let me know how can I improve this ...
3
votes
1answer
30 views
React avoid code repetation
I was working on a react hooks project.
I was making a form
In the form, I noticed myself writing a very wet code
Here is my code
...
1
vote
0answers
32 views
Multi Selection Component (React + Hooks)
all.
This component is meant to take in an array of available options and provide the user an easy way to choose multiple options. Each time the selected options are changed/updated, those options are ...
3
votes
2answers
114 views
How many `useState` and `useEffect` instances is conventional: one per page or one per app?
When you use React I think that each page uses the useState and useEffect hooks:
Initiate a GET of data from the server, and ...
4
votes
1answer
318 views
9X9 Tic Tac Toe variant with frontend in react and backend in python flask_socketio
I (a junior back-end Java dev) decided I wanted to learn some front-end development skills; in particular, I wanted experience with React and websockets. I decided to write an app that would allow for ...
2
votes
1answer
914 views
React form actions > Edit, Save, Remove, Cancel
For my robot hobby project I need to expose the system's configuration so I can quickly make changes to it. So I have made a very simple app that generates a form. In this form you can edit, save ...
4
votes
3answers
178 views
batch progress visualization In React.js
I am slowly digesting React.js, found couple of ways to write the same piece of code:
Please tell where all I went wrong in below code.
I try to put logic inside ...
2
votes
0answers
697 views
Method to hide/show table columns with React/JSX
I am writing a function inside of a React component to hide/show columns in a table. The table is generated from an imported config object containing objects which model the column data. We render by ...
3
votes
1answer
759 views
3
votes
0answers
32 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
27 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
59 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
180 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.
...
5
votes
2answers
290 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
184 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
46 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
57 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
83 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
29 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
49 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
326 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 ...
2
votes
1answer
80 views
ReactJS Calling an API and rendering results
I am currently learning JS Frameworks, right now exploring React and wanted to make sure I keep everything in order, as in: the logic of working with React, code quality, any shortcomings, good/bad ...
1
vote
0answers
136 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
44 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
17 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
23 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 ...
3
votes
1answer
11k 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
29 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
34 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
30 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
28 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
127 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
1k 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
842 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
92 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
44 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
1k 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 ...
1
vote
0answers
50 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
88 views
React context API design pattern
I created a boilerplate from react-boilerplate. I have removed redux and immutable for use context API and ...
