Category : react-hooks

I am new to react. I was trying to add Spinner in my app, and I got this error. Error: Spinner(…): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. Thanks in advance Dashboard.js import React, { Fragment, useEffect } from "react"; import PropTypes from ..

Read more

So here is my problem. I have: const nav = useHistory(); const location = useLocation(); There is DOM that uses location to determine its class. <IonItem className={location.pathname === appPage.url ? ‘selected’ : ”} routerLink={appPage.url} routerDirection="none" lines="none" detail={false}> Then when I call: nav.push(‘/’); It produces error: index.js:1 Warning: Can’t perform a React state update on an ..

Read more

I’m writing my first react-typescript application. Currently, I’m struggling with keeping state persistent on page refresh. This my code to fetch user information and setStatus and setAuth. const [status, setStatus] = useState(404) const [auth, setAuth] = useState(false) useEffect(() => { ( async () => { try { const response = await fetch(`${process.env.REACT_APP_API_BASE_URL}/user`, { headers: {‘Content-Type’: ..

Read more

I am building an app following the Rest Countries API challenge from frontendmentor (https://www.frontendmentor.io/challenges/rest-countries-api-with-color-theme-switcher-5cacc469fec04111f7b848ca). I have run into a problem. When clicking on the router link in countryDetail.js, the url changes but the component doesn’t get re-rendered unless the page is refreshed. CountryDetails.js import React, { useState, useEffect } from "react"; import axios from "axios"; ..

Read more

I am using React 17.0.2 with react-router-dom 5.2.0. I have a header component with a search bar. The concerned code is as follows <NavItem className=”d-flex align-items-center”> <div className=”searchBarDiv”> <input type=”text” name=”search” value={searchBarText} className=”searchBar-txt” placeholder=”Search…” onChange={(e)=> setsearchBarText(e.target.value)} onKeyPress={(e) => { if (e.key === “Enter”) { history.push(“/search?q=” + searchBarText); console.log( “…pushed to history: “, searchBarText, ” history ..

Read more