Categories
Mastering Development

dynamically slice array of product data to display in ReactJs component

I’m building an ecommerce store with Reactjs where I need to display the products in home component dynamically. Now in the home component the products should follow some styling like for example 4 products in first row, 1 in second row, 3 in the next row etc. I’m calling all the product data array from […]

Categories
Mastering Development

Why can’t I navigate to a newly added page in React?

I have react app with several pages as below. App.js import React, {useEffect} from ‘react’; import {useQuery} from ‘@apollo/react-hooks’; import {BrowserRouter as Router, Route, Switch} from ‘react-router-dom’; import {GlobalStyle} from ‘./GlobalStyles’; import {GET_AUTH_USER} from ‘graphql/user’; import {GET_NEW_CONVERSATIONS_SUBSCRIPTION} from ‘graphql/messages’; import {NOTIFICATION_CREATED_OR_DELETED} from ‘graphql/notification’; import Message from ‘components/Message’; import {Loading} from ‘components/Loading’; import AuthLayout from ‘pages/Auth/AuthLayout’; […]

Categories
Mastering Development

Drop down nav which slides in from the top

Github Repository If you look at the image below, you can see that I have a navbar which slides in when the menu button on the right is clicked. The nav slides back up if the user scrolls. The problem is that if the user scrolls up too fast, then the nav dropdown is still […]

Categories
Mastering Development

My wow js is not working in my react proyect

So im tryin to implement so animations on my website with wow.js but is not working and at the same time not throwing any errors. I share my code so you can tell me what am I missing. Thanks index.html <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/> <link rel="stylesheet" href="css/animate.css"> footer.jsx import React, {useState, useEffect} from ‘react’ import { […]

Categories
Mastering Development

Usage of recoil in custom NPM component

I’m trying to use recoil in a custom npm component so that i can publish and use it in an application but upon usage getting error as below: Invalid hook call. Hooks can only be called inside of the body of a function component… > const useStoreRef = () => useContext(AppContext); I’m using following rollupjs […]

Categories
Mastering Development

useEffect re rendering context api consumer component

I am trying to understand and practice React hooks. I have the following code with me. import React, { useState, useEffect, useReducer } from "react"; import "./App.css"; import DisplayUser from "./comp/DisplayUser"; const initialState = { firstStep: 0, }; const reducer = (state, action) => { switch (action.type) { case "increment": return { firstStep: state.firstStep + […]

Categories
Mastering Development

Mapping out DOM nodes from React Hooks GET

Apologies in advance for not wording my question as well as it could have been. I followed a MERN tutorial that was all done using class based React components. I am trying to convert it over to functional components with hooks. I am having trouble saving the users/usernames from the initial GET request, and then […]

Categories
Mastering Development

Call a ‘helper’ function from another component in React Native?

I’m sorry I find React Native to be hopelessly confusing and convoluted. I am using the code below as a ‘helper’ script to hold object values that could be accessed by separate components. LogContext.js import React, { useState } from ‘react’ export const LogContext = React.createContext({ set: "en", login: "false" }) export const LogContextProvider = […]

Categories
Mastering Development

How to show Product Item in Product List by array/object

I have to get all list of product from product Item that the place I display each product Item from Firebase, this is my code for that import React, { useState, useEffect } from ‘react’; import { Card } from ‘react-bootstrap’; import Button from ‘../Button/index’; import { DB } from ‘../../firebase/Firebase’; import "./index.css"; const ProductItem […]

Categories
Mastering Development

How to push to array inside dynamic object using React Hooks?

In this small code that I’ve written I have created a dynamic object upon setting state and adding files to it. However, the new file overwrites the previous file. With no luck, I have tried using the spread operator inside the array brackets next to mappedFiles. It seems upon setting the state dynamically, I am […]