Questions tagged [reactjs]

50658 questions
1

votes
1

answer
825

Views

Best practice for updating individual state properties with Redux Saga

So I'm working on implementing an application in React with Redux Saga and I'm kind of baffled at how little information there is out there for my particular use case, as it doesn't seem that strange. Quite possibly I am using the wrong terms or thinking about the problem in the wrong way, as I am r...
rosalindwills
1

votes
2

answer
740

Views

setState not updating when set to boolean

I have the following method in a react component: handleCheckBoxClick() { var checkbox = document.getElementById('boldCheckbox').checked; this.setState({ischecked : checkbox}); if(this.state.ischecked) { this.setState({weight:'bold'}); } else { this.setState({weight:'normal'}); } } but if I chang...
DCR
1

votes
1

answer
927

Views

React router in TypeScript- both router and own props

my component has some own props class Props { wizard: WizardConfig; } and I want to access router history so I also pass router props type PropsType = Props & RouteComponentProps; class Wizard extends React.Component {} The problem is that in component's usage I get errors that RouteComponentProps p...
micnyk
1

votes
2

answer
2.9k

Views

React - passing refs as a prop

I am trying to manage a checkbox with react. The following code works well enough, but I want to refactor out the code in the render method so that it uses a Component. I want to pass the ref to that component, but I cant figure out how to do it. export default class AreRefsAwesomeCheckbox extends C...
Ryan
0

votes
1

answer
20

Views

How to avoid sending multiple duplicate AJAX requests in axios

Is it possible to automatically throttle all requests going to a particular list of endpoints using axios? Perhaps using axios interceptor? Currently I throttle the user action that sends the axios request, but the problem with that is that I have to write this everywhere I have a user action that r...
ManavM
0

votes
1

answer
17

Views

onClick event on element on Mobile device hover state is still applied

I can't seem to find anyone with this same issue online with React, unless I've been searching for the wrong thing? I have a button (anchor tag) that has an onClick event. When the onClick event is triggered it calls a loadMore() function that makes an API call and updates some state. However on a m...
mcclosa
0

votes
0

answer
3

Views

How can I import Emscripten generated .wasm/js files in files created with create-react-app

I have a library I can successfully build & run with the Emscripten generated .html files. I'd like to use it with React now, however, I get a MIME type error` which I can't fix. Here are the steps I take to generate the React app and .wasm files npx create-react-app stackoverflow DEST=stackoverfl...
Marvin Irwin
0

votes
0

answer
5

Views

access the react server on cloud9 from PC browser

I want to try a react hands-on on cloud9. However, I can not access to the server on my PC browser. Detail: I've run an AWS Cloud9 environment with the default setting. Next run these commands. npx create-react-app handson-react-2019 --typecscript npm start Then it says. Compiled successfully! You c...
mogya
1

votes
0

answer
7

Views

Google Maps Directions API with no custom library

I have a button which, when clicked, is supposed to render a Map with the directions API loaded (the method is called from the main component). This is not working and I keep getting 'Uncaught (in promise) TypeError: Cannot read property 'defaultView' of undefined' on the console. Any ideas what´s...
ReactDoubter
1

votes
0

answer
8

Views

React named presentational / container parent / child components breakdown

Okay, I am trying to make a project using container / presentational components design but I am missing some kind of information or knowledege. What I am trying to do is to render a component based upon it's parent component's type: I have this route: http://localhost:3000/:componentId componentId h...
Martin Fernandez
1

votes
1

answer
1.7k

Views

How to React js event on scroll load other components

I have more components in one page. All pages loaded at the same time. But i want after scroll event loading next componentas. HomePage.js: render() { return ( ); } Have any idea? It is possible in react. Thank you!
Botir Ziyatov
1

votes
1

answer
770

Views

Update translation without page refresh (i18next with react)

My _nav.js file: import i18n from '../../services/Translator'; export default { items: [ { name: i18n.t('DASHBOARD'), url: '/dashboard', icon: 'icon-speedometer', }, { name: i18n.t('SCHEDULE'), url: '/schedule', icon: 'icon-calendar', }, { name: i18n.t('USERS'), url: '/users', icon: 'icon-user', },...
TungPham
1

votes
1

answer
1.6k

Views

Hover on a styled component without wrapper

So I have this: const Link = styled.a` color: blue; `; Hover Change I want to put a hover effect on just the Link element to change the color to white. Any other docs I have seen would have me put a hover call when I call Link: const Wrapper=styled.div` &:hover ${Link}: white; '; Hover Me How do I...
psion
1

votes
3

answer
718

Views

Pass parameter from a function to this.setState callback function

I'm a facing a bit of a problem here. I'm trying to pass a parameter from a function to this.setState callback, but I can't figure out how is this possible. My code looks like this: selectHandler(event){ this.setState({ selectedImage: event.target }, (event) => { this.markSelectedHandler(event) })...
Abdelrahman Mohsen
1

votes
1

answer
319

Views

REACT: How could we use an external library as a script, into a class or functional component? Is it possible?

Hello and than you for reading this question! I have a use case which I have to load a TIFF image. So then I have researched how to use this library: https://github.com/seikichi/tiff.js In addition, there is a great example of its use, thanks to @K3N Display Existing TIFF File Using the seikichi/tif...
Enoy
1

votes
1

answer
873

Views

Run npm project cloned from git

I want to run npm project, which was cloned from git, on my computer, but usual command like npm start did not work. Can someone give some tutorial how to start such projects or share some information.
Asset Bekbossynov
1

votes
2

answer
165

Views

Why can't I pass an object to state using setState?

I have been staring at the same piece of code for the last 2 hours and cannot see why my setState in the onReveal() method is not updating the state of the constructor. I have checked and I do seem to be creating a valid object (revealedArray) but this does not seem to be being passed to the state w...
Matthew Player
1

votes
2

answer
2.5k

Views

How to render JSON response as dropdown list in React

I'm currently trying to take some JSON data that I've received from an API and put that into a dropdown in a very simple React application. This is my DropDown component thus far: import React from 'react'; var values; fetch('http://localhost:8080/values') .then(function(res) { return res.json(); })...
HomerPlata
1

votes
2

answer
1.4k

Views

Reactjs code/naming conventions

Does anyone know if exists any official or most accepted reference for React naming conventions to use when we build our applications? React has a lot of different type of components such as React.Component, directives, services and so on. Wouldn't you agree that having a reference naming convention...
Rajendra Khabiya
1

votes
2

answer
1.1k

Views

Clear input in stateless React component

I want to implement an X icon inside Input component that will clear the input field. I can easily do it if I control the state. But is it actually possible with stateless component? I use react-semantic-ui, their stateful components have auto controlled state. So I want to create an input that can...
Andrey
1

votes
1

answer
1.4k

Views

React possible to change scss variable?

Is it possible to override scss variables in react. I have for example a theme.scss with some scss variables. Is it possible to change these scss variables with the props of the Container. I know I could change style={{ backgroundColor: style.backgroundColor }} into style={{ backgroundColor: this.p...
Jak111
1

votes
2

answer
1.1k

Views

React Dropzone + Redux form validation doesn't work

I'm adding a file input to a Redux form with React Dropzone. Validation function is called and the correct error is returned, but I the values for error and tocuhed do not change: The field render method: export const renderDropzoneField = function({ input, name, id, meta: { touched, error } }) { r...
1

votes
3

answer
221

Views

How to get state of child component in react native

I have Main Component file and use in another child component. I have to get state of the child component. Ex :- Home (Parent) - Form (Child) component i have been set the value of any text box in state. So ho can i get the state value of Form component into the main component.
Asif vora
1

votes
1

answer
696

Views

React child to parent communication

Am new to react developing a page with 3 UI cards like structure each card has 10 to 15 fields. At last has submit button, which will submit the page and summary will display in next page. so developed 3 components for each card and one main component which will combine 3 components and submit butto...
user1912935
1

votes
1

answer
37

Views

How to validate if my list consist of same name and alert already exist?

I want to validate the name if it's already exit or not. if Exist there should be a pop up to change the name Here is my list of object before saving. input change handleStoryboardTitleChange = (e) => { this.setState({ storyboardTitle: e.target.value }); }; save function handleSaveButton = () => {...
JMR
1

votes
2

answer
470

Views

React Router Gives 404 error on production

React Router works on local machine, Chrome but not on safari and other browsers, thats my code but it works perfectly in development mode no errors but on production, safari gives 404 error when i navigate to programs/:slug or page/:slug
Didi
1

votes
2

answer
800

Views

Trying to use emmet with a react app in vs code

I am using Visual Studio Code and creating a React App. I understand that Vsc comes with Emmet but it does not work with my React App. I have tried putting the following code in settings. 'emmet.includeLanguages': { 'javascript': 'javascriptreact', 'xml': { 'attr_quotes': 'single' } }, 'emmet.trig...
AltBrian
0

votes
2

answer
31

Views

How to pass multiple parameters as an object in url using react

I am trying to pass multiple parameters to my api (Koa) via URL (from ReactJS using Axios) to post data to my db. This code is working, but I am wondering if there is an easier way to pass data instead of typing out each value to insert into the database? I am adding an advising time to my db as suc...
gad74
-3

votes
3

answer
30

Views

create an array till any particular number in reactjs [duplicate]

This question already has an answer here: How to create an array containing 1…N 54 answers I am a beginner in React js and trying to do some operations. I want to create an array till the length of any array (particular number) suppose my array length is 10 , then the array should be my state var...
chandra
-3

votes
1

answer
20

Views

Is there a way to get date of the object attached in the picture?

I am not able to console a property time in the attached image it gives error ; link of the image . https://imgur.com/a/IevJFRw i have tried the dot operator to access the property it gives undefined const data = { channel: null message: 'hi deepak' receiver: 3 sender: 4 time: {$date: 1555993671...
Arush Singh
0

votes
0

answer
12

Views

Props table is not coming

Proptable is not coming when I am using babel 7 to transpile the typescript file. Github link for the code.(https://github.com/gmukul01/component-library-ts-boilerplate) My webpack config file for the storybook is like this const path = require('path'); const TsconfigPathsPlugin = require('tsconfig-...
Mukul Bansal
2

votes
0

answer
23

Views

How to check if user is logged in before redirecting to login page using local storage and react-redux?

I'm using HOC for authenticated routing. I want to check if there is a logged in user in local storage before the redirecting to the login page, but when the app loads it first redirects and then checks in local storage. App.js class App extends Component { render() { return ( ( ()} /> )} /> ); } }...
1

votes
1

answer
3k

Views

Reactjs: why use const {} = this.props and why put it inside the render function [duplicate]

This question already has an answer here: Javascript object bracket notation ({ Navigation } =) on left side of assign 4 answers I am learning reactjs and I see many people write, for example class Trees extends Component { render() { const { plantTrees } = this.props; return( ... I want to know wh...
kukumalu
1

votes
3

answer
2.4k

Views

React with TypeScript: Type '{}' is not assignable to type

I have a component in React that shows a navigation based on a prop. I cannot figure out why I am getting this error when I'm trying to run the application: (19,8): Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly
gfels
1

votes
1

answer
293

Views

How to find i18next missing keys

I'm using i18next to internationalize my React web application with typescript. When I process the text, it outputs the following: Running string extraction on source files Finding source files to process Running xgettext Extracting text for language en Translation file was found - merging translati...
Antoine
1

votes
2

answer
278

Views

Django & React with django-webpack-loader vs Decoupled App structure linked to Rest API?

I am reading through the following tutorial: http://v1k45.com/blog/modern-django-part-1-setting-up-django-and-react/ I can't quite grasp what the added value is of using something like django-webpack-loader to fully integrate react.js and django when you can completely decouple django from react, ru...
Aran Freel
1

votes
1

answer
205

Views

Securing .env parameters in react project

I'm new to React and js worlds, I'm trying to create production build of my application This application has some env parameters (api keys, secrets, etc.) living in .env.production file, when I run yarn build I get /build folder, especially main.js file, where all of my 'secure' env parameters expos...
Generwp
1

votes
1

answer
787

Views

In App Purchases in React-Native Expo?

I'm wondering if there is a way to implement in-app purchases in Expo for an app that I'm developing. As I researched online, I haven't found a clear answer. Could anyone help Please?
trill
1

votes
1

answer
370

Views

React & Reselect selector claims state is the same after update

I am implementing Reselect in my project and have a little confusion on how to properly use it. After following multiple tutorials and articles about how to use reselect, I have used same patterns and still somethings dont work as expected. My selector: const getBaseInfo = (state) => state.Info; con...
Kiper
1

votes
1

answer
861

Views

withFormik how to access wrapped form's props in handleSubmit

I define: class Form1 extends React.Component{ .... } and then define the HOC using withFormic: const Form2 = withFormik({ handleSubmit(values, { resetForm, setErrors, setSubmitting }) { ... }, .... })(Form1); In the parent component, I specify a callback function: Now, I want the handleSubmit to ca...
Pepe

View additional questions