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.
192
questions
2
votes
0answers
17 views
1
vote
1answer
31 views
React - Component rendering weather data
Background:
Hello, I'm a student (since 2 months) and I've created a small MVP of a weather application. So now I'm refactoring my code because it looks hideous and it is hard to work with.
The ...
2
votes
0answers
21 views
To-do application in React
I am new to react and I tried to implement a TODO application using react state and props. I need somebody to just review the code and suggest improvements in the code. Currently I have not added any ...
0
votes
0answers
14 views
Implementing Reddit-like comment links
I tried to recreate Reddit's functionality of replacing r/* on a comment with a link to the subreddit and I came up with this:
...
0
votes
0answers
22 views
Pagination component using React and Chakra UI
My Pagination component provides buttons:
5 around page (i.e: if current page is 3, then it will show button page 2 3 4 5 6)
Prev/Next page
Button to last page
...
0
votes
1answer
38 views
React code that controls user permissions
I have this code that controls the user permissions provided to a user. In my case, I constructed a simple example of CRUD. When the admin checks the boxes, it will grant the user access to perform ...
2
votes
0answers
32 views
Proper way of using redux and props
I made a weather app in react and redux for an interview. The response was that I didn't use redux properly, and that it has unnecessary props. I'm not sure what they meant.
The app is on github https:...
3
votes
0answers
61 views
Cryptomarket data visualization
For a hobby project I want to visualize the current crypto market in bubbles. The idea is to clone cryptobubbles.net. I've already made a prototype at the moment, but the frames are on the low side. ...
0
votes
1answer
35 views
Check in/out cards
putting the if-else block outside of a function looks clutter to me, should I just put it inside a function and then inside the useEffect ?
Purpose of the if-else block: Render the cards base on the ...
1
vote
0answers
18 views
Typescript React-Native Component Dimension Hook
I did a lot of research trying to find a React Native component which could reference its own dimensions in order to scale different elements in its style, but could not find any solid examples. I ...
0
votes
0answers
10 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
59 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
1answer
56 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.
...
4
votes
1answer
84 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
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
22 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:
...
0
votes
0answers
81 views
Obfuscate email React component
I've written this Email component which obfuscates the email until the user hovers over it:
...
0
votes
0answers
17 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
31 views
2
votes
1answer
38 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 ...
4
votes
0answers
53 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
25 views
File Picker Component - React
Created FilePickerComponent recently. I'm new to React/Web development. Could you please help reviewing this code -
...
2
votes
0answers
133 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
39 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.: . ...
3
votes
1answer
51 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 ...
2
votes
1answer
47 views
React component to render price change
I've written this Card component which is composed of thumbnail image, name, symbol, ...
0
votes
1answer
96 views
This code renders a time dilation calculator
I've been learning React for about a month now. I wrote a small interactive calculator to show the effects of time dilation under special relativity. It's Node/React/Razzle(for SSR)/Typescript/...
1
vote
1answer
56 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
31 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
38 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
47 views
3
votes
1answer
82 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
99 views
naming convention for atomic design
We follow atomic design principle. More here
I have a react app where we put small components like button, label etc and call it atoms.
In that I have made loading and Error component responsible for ...
3
votes
0answers
73 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 ...
6
votes
1answer
166 views
Hacking Minigame
I made the UI for the hacking minigame from the Fallout series. Could I get some feedback on the main Game.js component? It's my first React app.
I'm especially ...
3
votes
3answers
94 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 ...
2
votes
2answers
32 views
Profile with static and input modes (View and Update)
I'm a solo developer and a friend told me that my code is not very readable. I always write code trying to keep it DRY while not taking longer than it would take doing it in an "easier" way.
...
4
votes
1answer
36 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
...
3
votes
1answer
59 views
React/Redux/Node/Express crud application with a React class component
https://try.gitea.io/nadal/repository
Used this in a coding challenge after a job interview. I didn't get chosen, but I was wondering if it was because of the code quality in the project.
...
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
137 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
483 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
2k 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
204 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
961 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
1k views
3
votes
0answers
36 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
32 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
61 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?
...
