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
8
votes
4answers
799 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 ...
8
votes
2answers
6k views

Simple checkboxes with React

I was given the following exercise as part of a job interview process. I submitted my code and received the feedback that my solution is "close" but not "correct". My code executes just fine and ...
7
votes
1answer
3k views

React Native - Combining login and signup pages into one component

I have been building an app in React Native and have decided that since my Login and Signup components share much of the same ...
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 ...
6
votes
1answer
9k views

Unit tests for React component to submit an input form with validation

I'm very new to front-end/unit testing and have been having a difficult time understanding the point altogether, but I managed to push my way through testing literally everything I could possibly ...
6
votes
1answer
2k views

ReactJs stateWrapper for nested state objects

I made a simple state wrapper for a react project I am working on, so I can keep my state at the top component but reason about it at a lower class level. The example below is very simple, but it ...
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 ...
5
votes
1answer
921 views

React typeahead component

In order to get a better grasp of React I decided to create a typeahead component. I'd really love some feedback on this in order to improve, learn or avoid mistakes regarding my code. I'm unsure ...
5
votes
1answer
153 views

React calculator

My company is going to make a big leap soon, and since we are currently still running on AngularJS 1.3.X we decided to make the switch to react for a myriad of reasons besides the obvious. Being the ...
5
votes
1answer
751 views

ReactJS app to add and validate items to a list

I wrote a sample app based on the ReactJS tutorial, and I would like some thoughts on how idiomatic this code is. Unfortunately there's no ReactJS integration with Stackoverflow snippets, but I do ...
5
votes
1answer
2k views

React app with table, search & pagination

I'm new to React. I major in Angular. And for me it's realy not so obvious here... Do I use this props & state variables in a good way or do I need to refactor/change something? Main goal is such:...
5
votes
1answer
1k views

React app for movie search, making AJAX call with input value from another component

I am building a movie search React app using themoviedb.org API. To make ajax call to pull the list of movies I need to get input value as a variable and feed to the url, but not sure how to fetch a ...
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 ...
4
votes
1answer
567 views

Jest / Enzyme test for a React component to calculate average data speed

I'm trying to master testing. I struggle, conceptually, as to what should be tested. Is this Jest / Enzyme test sufficient for this react component? Is is too much? Are there better practices that I ...
4
votes
1answer
3k views

Class to create HTML heading tags in React

I have a class which is part of my page layout. It is creating header tag elements (h1 - h5). Could someone tell me how I could ...
4
votes
2answers
246 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 ...
4
votes
1answer
111 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. ...
4
votes
1answer
4k views

React Exercise: Build a dynamic list application

Task Description: Create a div-element and take control over it using a Vue-Instance. Print an array of hobbies into the div-element. Provide some default hobbies. Add a 'New Hobby' button and a ...
4
votes
1answer
156 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 ...
4
votes
1answer
84 views

Tabby Cat - simple react app

I am new to ReactJS as a fun alternative to the old boring JS and for practicing I tried to make a sort of "tabby cat" app similar to the browser extension one (tabbycats.club) where you get a new ...
4
votes
1answer
92 views

FlightList application

The requirements are as follows: Create a Flight app service using React that does the following: Login page: When entering username: “user” and password: “password”, the user will be routed to the ...
4
votes
1answer
881 views

React component to list TV shows from a JSON result

I'm trying to rewrite my old project in Reactjs. As I am a beginner and this is my first app, I need some assistance in understanding what is the best way to do this in the React way and how I can ...
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. ...
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
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 ...
3
votes
1answer
2k views

Building a multi-panel display with React and Bootstrap

The exercise is part of a React course in which I'm currently enrolled. Description: The way it shall look on desktop-screen: How it shall look on mobile: Here's my solution: HTML ...
3
votes
1answer
462 views

React setState function in useEffect

I'm toggling a state when the browser is resized: ...
3
votes
2answers
1k views

Filtered table in React.js

I am doing a filtered table in react, and I came up with the following code: ...
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
2answers
122 views

React clock component

I'm new to React.js and this code came from 30 Days of React - Day 7. However the given code example wasn't working so I rewrote it myself. My biggest issue here is how to make the component work ...
3
votes
2answers
161 views

Simple Kanban component

I am looking for some suggestions on how to make my code cleaner and simpler. Or put another way: more elegant and idiomatic. Any other comments on quality or anything would be appreciated. ...
3
votes
1answer
71 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
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 ...
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....
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. ...
3
votes
1answer
815 views

Analog clock in React.js, rendered using CSS rotation

I am new to ReactJS and I am trying to write a component which emulates an analog clock. The second, minutes and hour div elements are transformed every second using an interval function. However, I ...
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 ...
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
2answers
1k 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: ...
3
votes
2answers
89 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 ...
3
votes
1answer
637 views

Hover on list items to change map marker styling

I'm struggling to make a React/JS map I have more efficient. Essentially, I have a list of cards, and then a map of markers. When I hover on one of the cards, it changes the styling of the marker. ...
3
votes
1answer
194 views

Show 3d models loaded via asynchronous request

First I explain the data to give context: We have the following folder structure: ...
3
votes
1answer
569 views

React - Calculator App

I have just started playing with React today and built a simple Calculator app. Would someone please be able to advise on steps I could take to improve my code? Ideally, I want ideas on how to ...
3
votes
1answer
436 views
3
votes
1answer
2k views

Countdown timer in React.js

Code is a countdown timer. Should I keep this update function separate as is or can I save 3 lines of code and embed ...
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 ...
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
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 ...
3
votes
0answers
100 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 ...
3
votes
0answers
280 views

First React App: ToDo list

This is my first attempt at React and I don't want to pick up any bad habits for the long term. The code is adopted from a example app, but I have added a fair amount of new features. I.e. Clicking ...