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.

Filter by
Sorted by
Tagged with
1
vote
1answer
24 views

react component optimization

Dears I have following component ...
2
votes
1answer
353 views

Simple blog using react redux react-router

I've implemented the logic of my app, but I'm not sure whether it appropriate way or not. Task: create a react app using redux, react-router v4 which has a page with a form for adding new post and ...
2
votes
0answers
34 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
1answer
72 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 ...
3
votes
0answers
28 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 ...
4
votes
1answer
156 views

React component that plots d3 graph

Edit: if there's a better way to make this reproducible, please let me know. I can create some dummy data and put this in a codepen, but that wouldn't really reflect the interaction with React that's ...
3
votes
3answers
80 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 ...
8
votes
4answers
801 views

Country Guessing Game

I'm learning React and I made this country guessing game. What improvements/suggestions do you have for it? Preview it here ...
4
votes
3answers
160 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 ...
1
vote
0answers
30 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
92 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 ...
2
votes
1answer
15k views

onChange vs onKeyPress for input in React

I have an input form, and when you press enter I want it to call a function. I was wondering what "the right" way of doing this is. Right now I have an input looking like this: ...
3
votes
1answer
201 views

Basic ReactJS Components routing

Recently I've started learning ReactJS and I do not look forward to making one Page website so I learned about react-router and this is my way of doing to it. App....
4
votes
1answer
159 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
281 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 ...
3
votes
1answer
470 views

React setState function in useEffect

I'm toggling a state when the browser is resized: ...
2
votes
0answers
439 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 ...
1
vote
1answer
50 views

Header navigation with React

I'm new to React and started this project as a sandbox to experiment with it. I implemented a main page wich has a header and some content. The content is selected on the header. I'm wondering how it ...
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 ...
1
vote
1answer
107 views

sportsRunning and sportsWalking

There are two functions, sportsRunning and sportsWalking, that will render different text. For this, I am using an ...
3
votes
0answers
26 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 ...
2
votes
1answer
45 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 ...
1
vote
0answers
133 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
237 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
118 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'...
4
votes
2answers
247 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
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
80 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. ...
3
votes
2answers
223 views

Redux Recipe List

I made a simple React + Redux app which allows you to add and remove recipes to a list. Here are the user stories the app fulfills: User Story: I can create recipes that have names and ingredients. ...
0
votes
0answers
27 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
48 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 ...
1
vote
0answers
89 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
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
41 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
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 ...
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 ...
2
votes
1answer
10k 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
27 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://...
7
votes
0answers
4k views

React Native - Rendering different scenes based on application state

I am using react-native-router-flux to organize the routes for my application. Using Firebase, I am able to call ...
1
vote
1answer
4k views

Login page without header/footer bars

I'm creating an app where the login page doesn't have the header/footer bars that the pages, after being logged in, would have. I've created an example that works, but I'm unsure if I am using the ...
1
vote
1answer
29 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
101 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, ...
2
votes
1answer
40 views

Redux actions inside a container for a calculator

I used to import all the actions in the container's argument which looks messy (I put a comment below where I do it in that way). I want to know if there is a better approach when using actions with ...
1
vote
0answers
809 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 ...