Questions tagged [reactjs]

30239 questions
1

votes
3

answer
44

Views

Trying to get the days from subtracting two different dates

I'm trying to figure out how to subtract two different dates to get the remainder. Based on my Google searches, this seems like it should be pretty straight forward, but my code just isn't working as expected. const options = { year: 'numeric', month: 'numeric', day: 'numeric' }; let today = new Da...
pingeyeg
0

votes
2

answer
37

Views

React onClick wont get api request unless clicked twice

I'm trying to tell react, onClick run process.env.REACT_APP_LOGOUT and remove the item set in localstorage. Unfortunately, i have to click it two times, once it clicks the first time, you will get redirected to the index page, and you have to click it again once you are on the index page for it to...
randal
2

votes
4

answer
46

Views

check if login was successful?

I compare local storage values with input values. If values are correct I want to print alert('login successful'). If not alert('login failed'). Because this is a loop i need to somehow check if alert('login successful') have fired. And if not. Print alert('login failed'). Any ideas? login(){ let da...
Arnas Dičkus
0

votes
0

answer
27

Views

Node failed to lookup view “error” in Express/react app

I am working on my app and it worked a few hours ago. But now when I start it, I get the following error. There is no /views directory in /lib, but there is in my src/. It contains error.jade. I have tried everything. Deleting /lib, reinstalling everything... Error: Failed to lookup view "error"...
vemund
-1

votes
1

answer
20

Views

Address to latitude and longitude - ReactJS

In my react app I need to convert street address into latitude and longitude. Also, it is demo project, so I am really looking for cost-free solution. Any suggestions? Thx in advance
JozeV
0

votes
2

answer
23

Views

Map comments from Twitch API - React

I'm having trouble mapping comments / results from a Twitch API. I'm getting a TypeError when I try to map, and the results being stored from the API are capping at 60 records, and I cannot find a way to keep mapping past that. Below is my Component that is handling the API call and mapping... impo...
Tyler Watts
0

votes
1

answer
22

Views

JSS - How to style a nested child?

I have a list and want to style a nested element of list-item from the parent. How can i access the nested element? The code below does not work. react js mark up my box second box JSS const styles = () => ({ box: { background: 'red', }, list: { listStyle: "none", "li": { "&:first-child": { "& $bo...
vuvu
2

votes
0

answer
69

Views

How To Configure React 360 for Google Cardboard

I'm doing some tests with React 360 and the only hardware I have at the moment is a Google Cardboard. I'm using VR Browser on iOS to view the content I've uploaded and it's working, but the stereoscopic image seems to be too far apart resulting in a "seeing double" effect. The canvas object also doe...
Cmaxster
1

votes
1

answer
18

Views

Return one or two objects with getDerivedStateFromProps?

My component receives profile and errors from the parent. Within the component static getDerivedStateFromProps sets the new state should the component receive new data from the parent. ... constructor(props) { super(props); this.state = { displaySocialInputs: false, handle: '', company: '', website:...
El Anonimo
1

votes
1

answer
19

Views

letting the user know props of component in react

i would like to know if there is a way to show the user what props a component can get without using typescript. an example from material UI:
alejandroFernandez
0

votes
0

answer
18

Views

How to get the latest value from a text box in updatehandler function in ReactJs

I have a textBox which will take inputs from the user and the values will be added to an array of buildingNames which will get displayed in the second page.The text box is already customized and designed in the project which I cannot change.So the below component is the customized text box that I...
pranami
0

votes
2

answer
17

Views

ReactJs - How to pass particular item id from one component to another component

Hi I am new to reactJs and it may be very basic question but i am stuck with this , can any one give solution for this. I need to pass id from Ownerlist.js to Ownerinformation.js , as of now i am hardcoding as 4 but i need it to send dynamically. List View Component - OwnersList.js List Item Detail...
Srikanthreddy Kotha
0

votes
0

answer
9

Views

Using `dynamic import` to fetch script from another host?

I run my next.js app on localhost:3001. I want to fetch script from another host (localhost:3000). I could do it like this. As for me, much prettier would be using dynamic import. But I got an error: 'ModuleNotFoundError: Module not found: Error: Can't resolve 'http://localhost:3000/static/fileToFet...
Oleksandr Blyzniuk
1

votes
1

answer
22

Views

How can I make an API call that depends on a value which is set by another call?

I have a login function where I am setting a token, that token is saved in a redux store, then, right after the login occurs, I need to make another call to the api which will feed the home screen with data. But in order to make that call, I need the token. This is the homescreen component where I n...
Non
3

votes
1

answer
42

Views

How to use a key/value object in react

I'm struggling to make use of an object in react, I'm trying to access the key:value that is being returned (and I can successfully console.log). All the examples I've tried result in either mapping each character or throwing an object child error and i'm at a loss. componentDidMount() { this.gun.o...
jhizzle207
2

votes
2

answer
23

Views

Is it best to perform an API call on componentDidMount or componentWillMount?

I am trying to figure out what is the best way to perform an api call. I need to get the data when the component loads and not on any onClick/onPress method. This is the api call using fetch: import { Alert, AsyncStorage } from 'react-native'; import { has } from 'lodash'; import PropTypes from 'pro...
Non
1

votes
1

answer
25

Views

TypeError: Cannot read property 'fixed' of null

I have gotten this error message: TypeError: Cannot read property 'fixed' of null. This project includes Javascript, Reactjs, Gatsbyjs, and Contentful. Error code section: 3 | import { styles } from '../../utils' 4 | import Img from 'gatsby-image' 5 | > 6 | export default function Product({ produ...
RyanGrant
0

votes
1

answer
21

Views

Apply JSON CSS to React component?

I'm creating a component that must pass along JSON-ified CSS to an external source which uses it to render a styled iframe. Some of these styles should affect part of the parent, but all will need to be passed along. Is there a good way to interpret the passed in JSON/CSS and apply it? Would it be b...
user161592
4

votes
1

answer
136

Views

React Native activeTintColor not getting applied on selected drawer item

React Native activeTintColor not getting applied on selected drawer item. My react native navigation routes looks like, -> DrawerNavigator -> StackNavigator -> HomeScreen -> FirstScreen -> SecondScreen -> ThirdScreen routes.js const RootStack = createStackNavigator( { Home: { screen: HomeScreen }, C...
Avinash Raj
0

votes
0

answer
3

Views

How to create a new marker or list of markers using Google Maps API on REACTJS

Im trying to create a list of markers on my map, but to create one, we need to use the .Marker object, a it require to specify the map. I got all my configuration on the initMap(), and inside the function is easy to create a marker, but when i try to use an event like "click" on a buttom, to create...
Hugo Guerrero
0

votes
2

answer
21

Views

Send React component's HTML to server

So I have a react component, . It takes in some props, styles them, and presents them. I need to convert this component into HTML, and send it to my backend so that I can generate a PDF on my server. I tried: import { renderToStaticMarkup } from 'react-dom/server'; import ReviewScreen from '../som...
Overwatch
0

votes
1

answer
13

Views

How do i set the type of this state in my component

How do i set the type of this state in my component state: any = { profile: { details: any: { name: any: '', email: any: '', age: any: '', cellNumber: any: '', } } } class NewNoteForm extends Component { static defaultProps = {profileStore:{}} state = { profile: { details: { name: '', email: '', age...
Hello-World
1

votes
1

answer
2.7k

Views

ReactJS testing with Jest fails: Cannot read property 'buffer' of undefined

When i try to test the react component LoginForm.js i am getting an error in LoginForm. i am require a module called joi in LoginForm. TypeError: /home/jaisonjustus/project/captainmice/src/components/LoginForm/test/LoginForm.js: /home/jaisonjustus/project/captainmice/src/components/LoginForm/src/jsx...
Jaison Justus
1

votes
1

answer
6.8k

Views

HTML select onChange doesn't fire when value changes

When this.state.selected changes, the select box changes its value correctly, but its onChange method is not called. This is probably because I need two-way-bindings for that, so I've tried the valueLink pattern from the docs, but it still doesn't get fired: render: function() { return ( React.creat...
kraftwer1
1

votes
2

answer
2.1k

Views

React, page is refreshing constantly

I was playing around with react for my first time and ran into some issues. I am creating 3 buttons with values and then executing a function when they're clicked that sends a post request and gets back data which is displayed to the user. For some reason, the _postURL function is being executed inf...
user3716926
1

votes
1

answer
2.1k

Views

Form file accept type in ReactJS

I have a simple form: Name Description Patch File I want to be able to only accept tar.gz file uploads. The only "type" I've been able to get was image/*. Where can I get a list of types?
Kousha
0

votes
1

answer
39

Views

reference to Component stored in localstorage is undefined on refresh

I have a component Widget which takes a reference to a Component class and its properties as props and renders it. This widget is rendered from a WidgetList Component which maps over the list of widgets which it stores in its state, as well as keeps the list updated in localStorage so that it can be...
ManavM
3

votes
2

answer
36

Views

Redux state outside redux's store

I've a situation where my react-native application has some images that I want to show, export const myImages = Map() .set('image-one, { name: 'Foo', source: require('./foo'), }) .set('image-two, { name: 'Bar', source: require('./bar'), }) I let my user to select the kind of image in question, like...
Federkun
-1

votes
0

answer
21

Views

Using React to display List of Cruise Ships by Cruise Line

At the moment I am doing a website on cruise ships using React. I have got so far with it, but now I am stumped on how I can show List of Ships based on the specific Cruise Lines. Note: that this is on the Cruise Lines Page. Here is a link to my repository (https://github.com/RobertWSON/Personal-shi...
Rob Wilkinson
0

votes
0

answer
5

Views

How can mock data in state in order to test a Redux reducer which deletes from the state?

How can I add some mock data to the state when testing a reducer in my ReactJS/Redux application? I have this test case: it("should store selected filter", () => { const selectedFilterData = { id: 4321, filterGroupId: 1234, filterName: "gender", text: "Male", value: "pdl_profile_gender_1" } con...
Mr B
0

votes
0

answer
2

Views

How to test third party library components with Detox in React-Native?

I have a example component code: import { Button } from 'react-native-elements' ... ... render() { return( ) } Example test file: await element(by.id('testButton')).tap() For a normal button the tests works fine. For third party button, I'm Only using react-native-elements, The test fails and shows:...
ShocKwav3_
0

votes
0

answer
6

Views

How to do Monorepo setup with react and react native apps for sharing code between them

I want to share most of react-native login with react web. I am using react-native-web package for this. importing file in from shared folder doesn't resolve to correct path. My project setup looks like this: -MyApp --mobile --web --shared
2

votes
1

answer
26

Views

Is there such a thing as a “correct” way of defining state with React hooks and Typescript?

I've been working with React for a while, and yesterday I got my feet wet with hooks in a Typescript based project. Before refactoring, the class had a state like this: interface INavItemProps { route: IRoute; } interface INavItemState { toggleStateOpen: boolean } class NavItem extends Component { c...
1

votes
3

answer
33

Views

When getting input text, why is my evt.target.value always undefined?

I'm trying to pick up user input, save to a variable and then dispatch to the store. But no matter what I try I always get 'undefined', why is that? I feel like I've tried everything. I initially thought my scope was wrong. Then I thought it was just unable to setState/getState, but it is setting st...
Grant Isdale
0

votes
1

answer
14

Views

React event object

I'm working on React project but I encountered a issue. I don't know why event object is not passed by onSubmit. ` const SearchBar = () =>{ const test = (e) =>{ console.log(e); } return ( test()}> button ) } export default SearchBar; `
Park
0

votes
0

answer
3

Views

Should I use ComponentDidMount or mergeProps of connect function for data fetching?

I use react with redux and have a component which displays some dataSet fetched from external source. My current code looks like: const ConnectedComponent = connect( state => ({ dataSet: state.dataSet }), dispatch => ({ loadData: () => { ... fetch data and dispatch it to the store ... } }) )(MyCompo...
Andrej Kirejeŭ
2

votes
0

answer
15

Views

Typescript: Compose HOCs wrapping components with defaultProps in React

Trying to compose several HOCs (with compose func) seems to lose props annotations altogether, as if making a proper HOC that doesn't lose it wrapped component's defaulted (therefore optional) props wasn't tricky enough. Found some nice workarounds to make HOC preserve optional props of wrapped com...
infctr
1

votes
2

answer
4.2k

Views

Loop and return through 2d array in React

I'm trying to display a 2d array as a table, but I'm not entirely sure how would I go about this with React. This code currently only outputs the first row, I tried returning 2d arrays as a whole but that didn't work either. var DisplayRow = React.createClass({ getDefaultProps: function() { return...
dl8
2

votes
2

answer
29

Views

A way to display the component once by using localstorage in React

I have a component that I want to display once the user loads the website. Then if they click to close it it shouldn't display. What's the best way to do this by using ComponentDidMount()? I assume the click out state should be in componentDidMount? class App extends Component { constructor(props){...
Max T
1

votes
1

answer
13

Views

Error: Actions may not have an undefined “type” property

I am new to Redux, semi-new to React. I've made a few simple applications with it. I understand the basic concept of Redux (storing state in a central location) which sounds more elegant than passing things along via components/props. However, I am getting the following error: Error: Actions may not...

View additional questions