Questions tagged [reactjs]

React (also known as React.js or ReactJS) is an open-source JavaScript library developed by Facebook for building user interfaces. It uses a declarative, component-based paradigm and aims to be both efficient and flexible.

Filter by
Sorted by
Tagged with
0
votes
0answers
13 views

React/CSS: Pushing the first element of ul to left and keeping the rest to the right

I'm trying to create a nav bar with the logo to the left and the rest elements to the right. For some reason the :first-child keeps pushing all of the elements within ul to the left. JS: function ...
0
votes
0answers
14 views

How to update value of second column of array

I'm trying to update the state value of an array that takes a value from a string in my state. I was able to do this and store a string value into a column of an array. But now I want to store another ...
0
votes
0answers
4 views

scrollIntoView ain't working on my react component

I'm working on a chatbot. Below is my React component.I am tring to scroll the MessageListWrapper to the bottom every time messageList gets updated. But it doesn't seem to work, in the sense the div ...
2
votes
1answer
23 views

Trouble iterating/mapping props

I'm trying to develop a simple application in which any number of tasks will be rendered as cards. I'm passing them as props, schemed like so: taskList: [{ taskID: 1, taskTitle:...
1
vote
0answers
5 views

Error while integrating React Native debugger with react native app (expo)

I am trying to integrate my React-Native app(expo) with React Native Debugger. But I am getting the below error:- error:- Please find my code below:- App.js const App = () => { const store = ...
1
vote
0answers
30 views

How to show/hide React element of fected array.map()

I want to show/hide a part of JSX depending on onClickShowChart state property and output the correct chart data based on the ID. But this part inside a map loop, when i click to show element then it ...
1
vote
0answers
28 views

My Visual Studio Code extension is not showing code properly

Hello guys I am a student and a learner, new to Visual Studio code. I was working with java Scr ipt and whenever I was trying to save my code by pressing Ctrl+save button it was automatically ...
1
vote
0answers
13 views

In Reactjs how can I do custom message for checkbox

register.js <Form.Check type="checkbox"> <Form.Check.Label className={"text-muted"}> <Form.Check.Input ...
2
votes
1answer
31 views

Shouldn't this key be unique?

Trying to make a simple application based in .NET Core with a React front-end and i'm struggling to figure out why my data is not displaying, I'm going off of the React template for .NET Core, and ...
1
vote
1answer
15 views

Validation in React Hook Form to make sure at least one checkbox is checked?

I am working on a form in which I have a section of it that needs to have at least one of the checkboxes checked. I am using ReactJS and a React Hook Form. Here is the checkbox section of code within ...
1
vote
0answers
10 views

Simple React Error: Can't use @material-ui/picker library in Next.js

I'm trying to use the @material-ui/pickers library within a Next.js app. I added the _app.js file inside /pages as indicated in the Next.js docs as a place to put the Picker provider: import React ...
1
vote
2answers
26 views

Multilingual blog with Node.Js

good morning. My whole site is based on Node.Js and I'm developing the blog for this site, I'm interested in doing it in English, Spanish and Portuguese, both the site and the blog. I'm using: node.js,...
0
votes
0answers
9 views

electron-forge with react only shows errors and blank screen right after installation

I am installing my electron-forge app with a react template electron-forge init MyApp --template=react cd MyApp npm install but somehow I am getting several errors while npm install > fs-xattr@0.1....
0
votes
0answers
12 views

How do i upload a boostrap react theme so I can edit it?

I am new to react, and coding in general, and can't figure out how to edit / upload the code of a react bootstrap theme I bought to vscode. I cannot find a step by step guide for this anywhere, I have ...
0
votes
1answer
26 views

How to get the full height?

I'm trying to get the full height of the page to apply it to the styles, specifically to the darkMask class. I need the height because when I do an action inside the header, a dark layer is applied to ...
0
votes
1answer
20 views

The style is not updated

Hi everyone I want when I click that the heart fills up and becomes red or it is empty and is black, only I can't achieve this result, neither the color nor the shape of the heart changes when I click ...
0
votes
0answers
12 views

How do I set up React-spring in codepen?

I tried to create a basic setup to start practicing react-spring in CodePen, but it shows an error: Uncaught ReferenceError: require is not defined. I don't know why this happens and how to fix it. ...
0
votes
0answers
13 views

React app errors when pushing to GitHub pages

When pushing my React app to GitHub Pages, I continue to get various error messages. Some projects when viewed through GitHub just have a blank screen, others have 404 page not found errors, others ...
0
votes
0answers
14 views

variable outside of react component is rendered everytime component called?

// something.jsx let variable1; const SOMETHING = () => { return <div>..something</div> } if SOMETHING component rendered, variable1 is also rendered? (means declare every time the ...
0
votes
0answers
19 views

Reactjs : Unable to add update textfield in customBodyRender

Material-ui TextField value is not updated.Example of expected working scenario and non working scenario below. WORKING SCENARIO is here: To replicate issue in working example, just comment this ...
0
votes
0answers
11 views

How to upload split image - React Native

someone worked before with: https://www.npmjs.com/package/@mux/upchunk I ask you because I want to upload split image, but this library used this method: const upload = UpChunk.createUpload({ ...
-1
votes
0answers
14 views

How do I resize the iframe height after the form finishes loading it?

I am fairly new to React. I have an iframe that gets populated when a form is submitted. The height of the content of that iframe changes each time. How do I change the height of the iframe to match ...
0
votes
0answers
19 views

react setState is not working when I try to change page

I don't understand what am doing wrong here, couldn't find any solutions.I hope you can help me. I guess setState in onChange function is not working or maybe another problem here.I've tried ...
1
vote
1answer
13 views

input type datetime-local value doesn't change if default value is set

Premise I have a date that I format and set it as default value to an input type datetime-local. onChange of the input, I want to format the newly selected date/time and save it in a state. However, ...
0
votes
0answers
15 views

How to scroll to a functional component in React?

I am new to Reactjs. I have functional component that has Title defined, now i want scroll to be implemented when a user clicks on the title, user should be scrolled to appropriate functional ...
0
votes
0answers
7 views

React-Native Firebase Image upload Expo

I am trying to upload an image to firebase storage however I am getting the error object Object as shown below Please may someone help me I have never uploaded an image to firebase and really need ...
-2
votes
0answers
23 views

how to fetch and send api in react

Use angle brackets to force linking https://github.com/namratasoni-coder/react_pro Try to implement in local host Text I want to set up project in local system but not getting results Text
0
votes
2answers
32 views

Dynnamically creating and updating similar state with onee method in React

I am trying to use a single handleChange method for checkbox and then update their respective states accordingly. When I am trying to create dynamic function call its breaking. Let me know what I am ...
0
votes
2answers
19 views

Can't perform a React state update on an unmounted component when using Redux

I'm using Redux to manage a global Dialog component. I pass the children components to the Dialog component using Redux actions. A functional example is in this codesandbox: https://codesandbox.io/s/...
0
votes
3answers
17 views

Synthetic Event instead of useState values

I'm newish to React so bear with me as I try to explain the issue. I'm creating an app that pulls all COD customer information and allows the user to search through it, as well as creates a calculator ...
0
votes
2answers
24 views

Separate checkbox for each table row in React.js

I have a functional component which returns a table with many rows like this: import React from "react"; import Checkbox from "@material-ui/core/Checkbox"; function Table({ data })...
0
votes
1answer
7 views

amCharts (V4): first month format in DateAxis without year

In a XYChart I am trying to set on the x-Axes, the twelve months as lables, from Jan to Dec, but as shown in the picture, the first month has also the Year (yyyy). let dateAxis = chart.xAxes.push(new ...
0
votes
1answer
14 views

how to allow my react js app to get Cross-origin request from other react js app?

I have two react js applications app1 & app2 (suppose). app1 gives some weather information, and the other app(app2) requests the first application(app1) for the weather info. While I am trying to ...
0
votes
0answers
11 views

Set sticky header with Autocomplete input

Basically I have an Autocomplete input inside a header render. I can add the item from the Autocomplete input to a list, but when this lists get's too big, I can Scroll down on it Right now I have 2 ...
0
votes
0answers
11 views

How to pass data from React to Alan-AI Studio?

I am asking for a country from a dropdown from a user. Then I want to pass this country to alan studio so that I can add this country to NEWS_API_URL
0
votes
0answers
10 views

I can't see any ChatCard in my React hook code

import React, { useEffect,useState } from 'react' import { Form, Icon, Input, Button, Row, Col, } from 'antd'; import io from "socket.io-client"; import { useSelector, useDispatch } from &...
0
votes
0answers
20 views

How to strike through a completed list item in To-Do App?

I am trying to strike through the completed list item in react based todo app . I had tried many ways to do this but in the end the Done button not doing anything. The done button not giving any error ...
0
votes
1answer
15 views

Unable to display react-toastify

sandbox: https://codesandbox.io/s/angry-ganguly-6q0q2?file=/src/MessageToast.tsx With the above code I'm trying to display react-toastify with state using redux. Once I click the login button from an ...
0
votes
0answers
21 views

Multiple file uploading In Reacjs

I want to upload the multiple images in react but when i pass the object with formdata.append it give the result of images: ["[object File],[object File],[object File]"] instead of images ...
0
votes
0answers
13 views

Trying to add my custom react plugin fails

I am trying to create material-ui react plugging which have icons based on SVG image files, I followed this thread and tried to add my plugin (How to add custom `PNG` image to material ui icon) ...
0
votes
2answers
18 views

Return html element in browser by clicking a button

newBlock.js function NewBlock() { function p() { alert('hello world') } function h() { return <h1>Hello world</h1> } return( <div> &...
0
votes
0answers
13 views

TypeError: react__WEBPACK_IMPORTED_MODULE_4___default.a.memo is not a function

i am working on a react project and i am facing an error : TypeError: react__WEBPACK_IMPORTED_MODULE_4___default.a.memo is not a function my package.json file: { "name": "new", "version": "1....
0
votes
1answer
25 views

Why does this React/ReactRouter/CSS Transition only work sometimes

I am trying to create a transition between two routes. My CSS Transition does not seem to work every time, only sporadically. I found this post React css transition does not work correctly which ...
0
votes
0answers
6 views

How to add additional files to CRA WorkBox Precache?

So, I want to make a PWA for one of my CRA projects. The app has a different wallpaper everytime it loads, which it gets through an API. But since PWAs are supposed to have offline support, I wanted ...
0
votes
0answers
18 views

Minimizing browser causing space between images to disappear and change?

I would like to keep the spaces between my images constant (adjacent images and images that are below). For context, I am using ReactJS. Right now, whenever I minimize my browser, the space between my ...
0
votes
0answers
52 views

Check for array length of 1 fails every time

I am trying to build page specific menues. Each menu can have sub links up to level three, each link can contain 0 to many sub-links. My logic for handling this is: If a subLink array has length of 1 ...
0
votes
0answers
47 views

React.Fragment component is not rendering within other component

The React.Fragment(in the below code FragmenttedComp) is not rendering in the ChildComponent Here is my code, export class ParentComponent extends React.Component<Props> { . . . ...
0
votes
1answer
17 views

React material container header main and footer it is not aligned using flexbox in the header

My goal is to build up a simple layout with header main and footer but I've got problem with the alignment. The header container is not aligned with main and footer (is slightly shifted on the left) ...
0
votes
2answers
24 views

Can't resolve 'react-router'

I've just started ReactJS and trying my first react app. I am trying to add a navigation as follows- import React, { Component } from 'react'; import {Link} from 'react-router'; class App extends ...
0
votes
0answers
10 views

how to add a new row using react-table v7

i am using react-table v7. What i want to achieve is to add a new row below a row when a button is clicked. Like jquery datatables https://datatables.net/ when name is clicked a new row is added into ...

1
2 3 4 5
4750