Javascript Tutorials

JavaScript object how to use Foreach loop

JavaScript's Array#forEach() function lets you iterate over an array, but not over an object. You can iterate over a JavaScript object using forEach() using Object.keys(), Object.values(), or Object.entries().

MapboxGL is not defined error solution

Fix mapboxgl is not defined. it's an easy fix you just have to include mepboxgl script into your Head section.

Mapbox production error in console Uncaught Reference Error

Fix Mapbox production error in console. "Uncaught ReferenceError: y is not defined". with Mapbox 2.0 version React app in the production environment gets this error and it's really easy to fix it.

Essential javascript array functions

Much more efficient and flexible Essential javascript array functions to use in daily routine. Great Power at no performance cost.

Javascript Questions

Dynamic page title with ReactJS

I want to make a dynamic page title on reactjs. i try a lot of things , but didn't succeed. i make an array with data: let

is it possible in React useState(<></>) has initial state is empty div or component?

My code is like that const [component, setcomponent ] = usestate( ? ) what will be the initial value for

Material-UI Autocomplete & TextField triggers google autocomplete

I am trying to implement the autocomplete component into my project but am getting the autofill/autocomplete from the browser after some time. do

Getting this.startBreak() is not a function error in react.js

I'm a newbie working on a pomodoro timer app in react and i'm getting this error after calling a function within setinterval():

How can I chain functions together in React

I'd like to chain the two functions used below together to improve the experience of our mobile users. first the updateselectedvalue

Why go back button doesn't trigger client side navigation in Next.js app?

I have a simple next.js application that uses graphql to load articles from a server. dynamic routing works perfectly fine unless you reload the

React scroll to element after render

I am creating an app using react and apollo graphql. part of my app consist of showing a list of options to the user so he can pick one. once he

Cannot find module 'babel-plugin-transform-decorators-legacy'

After npm run eject (this was needed in order to change the webpack.config), i've run into the following problem during the app

How to make dynamic import/require depend of variable with code cleanup?

I have react app created by "react-create-app" with latest react 16.12 and webpack i need to make import with dependence on variable, like

How to change some part of the code in the connect method(to be used mapStateToProps)and that action which are present here move to index.js(action)?

I have an application written on redux-react. you can just see how it works in sandbox:

ReactJS/Semantic-UI DropDown MaxSelection

Well, i searched a lot but nothing found, i decided to solve it on my own but stuck in middle it. let me explain first, there is an option for

React JS Reducer - Not able to do anything with the returned payload, only able to print

I'm struggling with this issue for a few days straight now. my reducer file: import

How to stop forEach when I find the data I want to get in Firebase?

I want to get a data from firebase. but i know firebase use foreach to search a data in the database.

Prevent HTML file input from selecting files in Google Drive while using Android's native file chooser

Currently i'm working on a page that allows users to upload a file to firebase storage. when opening the site through google chrome on android and

Can't create global vue variable ( Vue.prototype.$firebase )

I submit the form in login.vue which will call submit(). then i'm getting below error in the web console.

Firebase function storing datetime as map

I have firebase functions setup to create a new event in the firestore db with the oncall method. i am passing data to the oncall method from my

How do you add images in Angular 5?

So i'm trying to add an image of my logo into an angular5/ ionic project. i'm using an html file as a template then i call it in all the

Why won't onCall function return data to the client?

I am trying to build a simple web app. the user enters a email and a oncall cloud function retrieves the uid associated with that email and sends

How to call a function when firebase query doesn't match anything in the database

I'm trying to implement a friend adding system for a react native project. i'm using firebase realtime database. the problem is when i use the

Modify a React hook variable inside useEffect() that uses a fetch() call

Inside useeffect(), i am requesting data from a server using a fetch() call. upon receipt of the data i am attempting to modify a hook i

How to propagate resolve() in nested promises?

I'm writing a react application and in particular cases i have to resolve nested promises. the code works fine but i can't propagate the

useEffect makes onChange and typing lag/slow

I am creating a website where the user can type what he is looking for in a search bar. initially, i had a problem with the fact that

How to filter object in react?

Here is my question, in the first picture. i map my object, it correctly displays my objects, i would like to filter only the items that contain

React router with Admin Layout

I have developed a mini web-portal which has a react based form for saving records and a retrieval page to search those records / delete and edit

Is there a way to separately style components rendered using the .map() function?

I am rendering one <tuner /> component for each item in my this.state.notes array using

How To Use Eonasdan Datetimepicker in React

What is the best way to use the latest version of eonasdan datetimepicker in react the project url:

SvelteJS vs ReactJS rendering difference (repaint / reflow)

Here's my naive understanding of how the dom and browser works whenever something in the dom ( the real dom ) changes the browser repaints

Why isn't my navigation bar rendering in React?

This is the code i have, i believe i have imported everything correctly, i am using react mdl to style it and copied and pasted the navbar code. i

React leaflet- how to add custom components with useLeaflet

I am trying to create an info panel for my leaflet map like so:

Updating a Material-UI TextField onBlur with Formik (React)

I'm currently rendering an editable table that lets the user bulk edit several user's information at once (see image). i'm using material-ui's

Reusable React Pagination Component

I am trying to create dynamic pagination react component with reactstrap as ui library. i am stuck around the problem of completing

Wait end of two subscribe to make an operation

I have two subscribe like this : this.birthdays = await this.birthdaysp.getbirthdays(); this.birthdays.subscribe(groups => {

Retrieve only some params from a node at Firebase (web)?

Does firebase allows me to fetch only some params from a node ? example user has: id, name, email, birthday, zip_code

How do I make sure that reducer response action is done before navigating to another page?

I'm currently using redux saga with react native and i have a question on how to properly handle the situation where the reducer action is not

Filter Array of Objects based on input field in React

Got in a rather troublesome situation i have an array of objects [ { "title":"placeholder", "text":"placeholder"

Fetching data from Express.js API from react.js. Postman's request are working

Can anyone help me with little problem? i have express application which is completly working with requests from postman(adding, deleting, etc.)

How can we draw a flowchart diagram in an react application?

In an react application i need to draw flowcharts like below example .the diagram is drawing based on json data. is there any npm packages or any

React custom Component(DataTable)

Im new to react and im trying to build a custom componenet with parameters. im just wonding whats the exact way on doing it. here

How to find out which package is using the UNSAFE componentWillMount method?

Since yesterday (i think) i've started to get this warning from react: warning: componentwillmount has been renamed, and is not

Using a Modal inside a list seems to pick the last value of the list

I have a list of cities and i'm trying to include a modal with a trash can icon to delete the city next to each item. the problem i have is that

Can't modify public variable inside value event listener Angular firebase database

I am trying to set a variable i have declared as public inside my class inside of a value event listener in firebase. although, i am receiving the

Display data from promise firebase

I have a service like this async getbirthdays() { const user = await this.authsp.getuserinfo(); let bdays = [];

Firestore: subscribe to document field

In my firestore i have users collection, every user have notifications field. how i can subscribe to this field values updates?

Retrieve all subcollections under document

I am creating a chat app with react native, there's a collection on my firestore called contacts, under contacts every user's email will be

DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in field uid)

So i'm trying to make a signup form for an app, and everything seems to be working just fine except the fact that it throws an error. the data

Not able to iterate over array of users pulled from firebase

I am using firebase's cloud firestore for a web page i'm working on. i have it currently setup to create a new document in the "users" collection

Nextjs send data (title of page) to component

I am trying to set custom title for each page in my next.js project. let's say this is my simple layout const mainlayout =

Write test-case in JEST-Enzyme for promise calling in constructor

I need to write the rendering test-case for a react class component which is having the promise which is getting called in constructor

Why state is not updated after button click using hooks?

Could you please tell me why state is not updated ? on button click i updated the state but when i console my state on setinterval it is not

React: Is it possible to stop code 'reading' until component will receive new props?

I have a component, that has button that creates newtype on click and sets it to state. types comes from outside from

How to render object that pass through props in ReactJS?

I am trying to render the data (object) that comes through props. however, i have got the following error: uncaught typeerror: cannot

render code to page using JSX whilst preserving line breaks

I am trying to use a field that will contain a load of code that contains line breaks and tabs. i want it to render and retain the tabs and line

Call a function from another class component in React.js

I would like to split my render into several parts. there must be some code bits missing because my real code is more than a thousand

How to redirect to another page and use props in reactjs

In route i set props: <route path="/getfilepage" exact component={getfilepage} coursename={props.coursename} />

Pass Children prop to React Memo component

I am currently in the process of optimising a number of react sfc components with the use of react.memo. most of these

How to format API JSON response to an array object in JS?

I am creating a dashboard in reactjs and i am using axios to make api calls. api response

How to assign a variable as fieldname holder when using doc.data(). in firebase to retrieve data

I am trying to recieve data from firebase cloud firestore. i have a collection called 'profiles', a doc called user and i have fields like

Firestore - get large collection and parse. Request is aborted

I've had a look around but can't find an obvious solution. i have a collection with 130k documents. i need to export these as a csv file.

Firebase database trigger - get database object from snapshot

I am writing a firebase database trigger function to push notifications to several users. for consistency i would like to batch all write

React Testing Library - Avoid getBy?

When testing components with react testing library, i find myself starting with getby*, and occasionally needing to replace it with

how to map over an Object and render the arrays inside the object javascript/reactjs?

Const data = { "13/11/19": [ {patientname: "a", room: "room1", user: "k"}, {patientname: "a", room: "room1", user: "k"}, ],

Why won't my controlled Input component in React update with the state?

I've got a list of ingredients in an "editingreds" array in my state, e.g. ['apple', 'banana', 'orange']. they are rendered to the dom via react

set styling to div which contain TextInput field

I'm new to react and material ui. i'm using material ui version "1.0.0-beta.17" and react 15.6.2. also has styled-components 2.0.0 and

Stacked bar chart starting from 0 - ChartJS React

I am building a simple horizontal bar chart. for each label, there are two data. one with duplicates, the other without duplicates. i want to

React JS How to change font color in element other than clicked button onClick?

So i have managed to change the background color of a button using setstate() within that button. however, i am trying to use that button to

Highlight rows in MUI-Datatables

I created a simple table using react.js and mui-datatables:

How to sort a map by a specific field in js (react)?

How can i sort this by name? can anybody help me with that?

I did not bind my function's "this" in the constructor, but why isn't "this" undefined?

My button has the following onclick function <button onclick={() => this.ondismiss(item.objectid)} type="button" >

Return array for specific country in json

I tried to find a similar issue that i am having and haven't found it. this is my json: { "name": "united states",

SetState inside componentDidmount is throwing error

I am new to react js and have started to create a small application in it. i'm facing some issue in setstate inside

Is there a way to disable typing/pasting into the date input and only allowing users to select from the date picker in AntD?

Is there a way to disable typing/pasting into the date input and only allowing users to select from the date picker in antd? disabling doesn't

Javascript Tutorials

Javascript Questions

Blog Categories