Categories
Mastering Development

React Native – Get an error when using a custom component that I made (Error: undefined Unable to resolve module

I made a custom component called “react-native-weekly-calendar”, and I’m trying to publish it to open source community, but I want to test it first. When I try to test it by npm install –save ../<component_name>, it throws an error. My directory structure: – react-native-weekly-calendar (folder) – index.js – package.json – src (folder) – Locale.js – […]

Categories
Mastering Development

Re-rendering the page when an element in the 2D array changes in react native expo

I want to re-run the code below to reload the page whenever the value inside the invitation[1][1] changes, I update these array values using the AsyncStorage in another page, when I tried the following I got the error below. Is there any other way to do so? React.useEffect(()=> { getUserId(); },invitation[1][1]); async function getUserId() { […]

Categories
Mastering Development

Unable to display the data by using useEffect hook inside MaterialTable

import React,{useEffect, useState} from ‘react’; import MaterialTable from ‘material-table’; import axios from ‘axios’; // function for adding the export default function MaterialTableDemo() { const [state, setState] = React.useState({ columns: [ { title: ‘Id’, field: ‘Id’ }, { title: ‘Todo’, field: ‘Todo’ }, { title: ‘Description’, field: ‘Description’, type: ‘numeric’ }, ], data: [], }); // […]

Categories
Mastering Development

A functional subcomponent doesn’t rerender on props change

I have a very heavy (computationally) functional component (Parent) which doesn’t have a state and has few Child sub-components with local state. Children are dependent only on props send from the Parent. I pass a function to one of the children (ChildA) to change the value of a variable on the Parent. This variable is […]

Categories
Development

useEffect in React runs in an infinite loop, when an array is passed as a dependency

When the following code is run in a React component, it causes an endless loop. Why does passing an array as a dependency to useEffect (in this case, args), cause that to happen? How can I stop the endless loop from happening? I’ve read that I can use [args.length] to stop this from happening, but […]

Categories
Development

Gapi Error in while using youtube data api in reactjs app

I have build up a project using Next.js. Here I have wanted to implement a feature using the YouTube Data API. The feature is when the user clicks the youtube connect button, a pop-up window opens and authenticates the user. After the authentication, the YouTube Data API gives a response which contains the basic info […]

Categories
Development

React Chrome Extension – `chrome.tabs.executeScript` not consistent

I want click a button to inject a script to grab some DOM items using chrome.tabs.executeScript. For some reason, it only works once on an initial page load, but if I click the button again, chrome.tabs.executeScript returns [null]. Here is my code, the function of interest is handleClick: import React, { useEffect, useState } from […]

Categories
Development

React hooks rendering cause

I’m playing with simple React components to understand when rendering occurs. Sample 1 – Initially renders once. Regardless of the number of times the button is clicked, it doesn’t render. This is expected. import React, { useState } from “react”; import “./styles.css”; export default function App() { const [state, setState] = useState([ { id: 1, […]

Categories
Development

React: Saved state updates the DOM but not the console

When I click, I set the saveMouseDown state to 1, when I release I set it to 0. When I click and move the mouse I log out mouseDown and it’s 0 even when my mouse is down? Yet on the screen it shows 1 import React, { useEffect, useRef, useState } from ‘react’; const […]

Categories
Development

Array.map() doesn’t render React component

I am having a problem where i’m trying to render pass an array’s data to a card component but it doesn’t appear on the page, the card component renders normally on its own: import React, { Component } from ‘react’ import { Container, Grid, Card, Segment, Header } from ‘semantic-ui-react’; import ArticleCard from ‘./ArticleCard’; export […]