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.
0
votes
0answers
14 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.
...
-3
votes
0answers
17 views
I want to display the details of each existing team with buttons [on hold]
This component i already create by react-js .
...
1
vote
1answer
25 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
41 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
17 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
28 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 ...
1
vote
1answer
38 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 ...
1
vote
0answers
50 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 ...
3
votes
2answers
40 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
38 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
67 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 ...
1
vote
1answer
33 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 ...
0
votes
1answer
24 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
79 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 ...
1
vote
0answers
15 views
In React/Redux, fetch a list from a server and create a randomized subset with lifecycle methods
This is my first React/Redux project. I'm pulling down a list of Google Fonts, then displaying a list of 3 randomly selected ones. I want the list of random fonts to be populated automatically after ...
2
votes
1answer
60 views
Dice-rolling tool
I am an experienced programmer, but a complete beginner with React. My goal is to teach myself React.
I've made a simple die-roller application. The application presents a drop-down, and the user can ...
1
vote
1answer
27 views
Navigation bar React component, with a “back” and a “close” variant
I am working on a component for a navigation bar. This navigation bar currently has two variations: a "back" version, and a "close" version.
I have come up with three different implementations but I ...
3
votes
1answer
29 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.
...
0
votes
1answer
20 views
Transform a javascript object to an array based on value of each key in the original object
I have an object of ingredients to be added to a burger. Its structure is as follows:
Input
...
1
vote
1answer
42 views
React component for Pai Gow game
TL;DR what should I do if I have too many methods in my parent component??
I'm making a card game (Pai Gow Tiles) using react and I am having trouble finding a way to format my parent component. I've ...
1
vote
0answers
185 views
React + Django (session) authentication
Is authentication implemented correctly?
At the entry point to the app, which is App.js, query the Django server, which responds whether the current user is ...
1
vote
1answer
79 views
React container component to fetch paginated data for a stateless table component
TableContainer.js does the common task of fetching data and passing it to a lower component, Table.js, which is a stateless ...
2
votes
1answer
33 views
Wrote a floodfill visualizer in React
First time using React.
Here is a demo: https://ostralyan.github.io/flood-fill/
Game Component
...
1
vote
1answer
23 views
Reacting to moods with icons
This is a class in my React app. This code works and displays an appropriate icon and question for every description.
...
0
votes
1answer
60 views
List with selectable and sortable elements
The code consists in making a list of elements sortable (with the drag on the right) and selectable (click on the text).
However it seems a little too complex.
https://codesandbox.io/s/434p397p74
...
1
vote
1answer
58 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....
1
vote
1answer
51 views
React multi-select-like component with filter
I am new to react (and javascript in general) but am enjoying learning it.
I have decided to make a little multiselect component which should work as follows:
I start with my data in one list, when ...
2
votes
1answer
33 views
Request for improvements on a simple React app
I'm looking for a review of a recent project I finished for school. It is an app that functions like Twitter. It includes an Express server and Routes. Instead of using databases, it uses JSON files. ...
1
vote
1answer
27 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 ...
2
votes
2answers
80 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 ...
2
votes
0answers
16 views
Markdown Previewer app done in ReactJS
What do you think of my markdown previewer, which uses the marked library? I'm asking because I'm new to React. And also what do you think of app itself? Did I use React correctly and properly?
HTML:
...
3
votes
0answers
51 views
Game of Life as a React app [closed]
I think the general functionality is there, but sometimes it looks a little slow/clunky when I try to run my app. Highlighting cells can be slow as it skips over some of the cells I hover over if my ...
1
vote
0answers
29 views
React form to add contacts to an app
I was recently building a form to add contacts to a play app I'm making and I finally got it to work. The problem is I'm not too happy with it.
It's my first time building an application with React, ...
3
votes
2answers
127 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.
...
0
votes
1answer
72 views
React component wrappers for form fields with 90% similar code
I have a number of these components, but will show just two as an example. They're very similar, but the differences are enough to where splitting them out felt needed. What I really need is some help....
0
votes
1answer
105 views
Pomodoro timer in React
I created a simple Pomodoro timer using React JS.
In my example:
Timer should count down seconds until it reaches 00:00
Timers should switch between 25 and 5 minutes
Timer should be able to start, ...
2
votes
0answers
314 views
Two-player Tic-tac-toe game in React.js
I followed React Official Tutorial and before implementing time travel, I wanted to add a "New Game" button, and a LockBoard method that graphically prevents further inputs.
Since I'm new to React, ...
3
votes
0answers
504 views
React native circular progress view
This is a functional component that I have developed in React Native for creating a circular progress view.
The code does not use any external libraries, just pure CSS. Article that I wrote while ...
3
votes
1answer
181 views
Show 3d models loaded via asynchronous request
First I explain the data to give context:
We have the following folder structure:
...
0
votes
0answers
83 views
Render a variable image of a flag in React Native
I'm learning React-Native, and looking for some feedback.
I have an image of a flag, that is associated with a language. There over 150 languages.
Here is what is working:
...
5
votes
1answer
99 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:...
2
votes
0answers
60 views
Implementation of CRUD todo list
We have a todo list, which by default holds two of them. The newTodo means what has been recorded in the input form to be the next todo to be added. needsUpdate and idOfTodoToUpdate are used to handle ...
4
votes
0answers
60 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 ...
1
vote
0answers
846 views
React: Simple Event Emitter on form example
I decided to study EventEmitter and play around with it in React JS for on example of a simple form.
I built EventEmitter and added event 'newdata' to it. On event 'newdata' is called function where ...
0
votes
0answers
11 views
Showing links to images using React
I don't feel like I'm taking advantage of React or ES6.
I guess, it looks messy and complicated.
But it does work!
However, I'm just not sure how to make it look better and maybe what I have here ...
1
vote
1answer
288 views
Form validation for multiple inputs
I created an example of a simple form for multiple inputs (name and phone number) in React. If the user enters invalid data in input field, error text is displayed near the same field. I learned a lot ...
2
votes
0answers
115 views
Form validation for the last name
I created an example of a simple form for a last name input in React, where I can check the validation of the data at the time of input. The last name should contain only small and capital letters. If ...
0
votes
0answers
148 views
ReactJS Component that retrieves quotes
I have created the following React Component and wanted to have feedback about if its SOLID or not, and what can I do to make it SOLID?
I do believe its SOLID but would like feedback from guys with ...
4
votes
1answer
214 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
75 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 ...
