News Articles react hooks

Invalid hook call when using useCallback to a function with hooks

I am trying to call a function that contains hooks from a button’s event handler. I thought that using useCallback would work well for this, but I seem to be getting an error with this. Below is a rough version of what I am attempting and have verified this to also cause my issue: component.jsx […]

How do I use fetched API data in another component as described below?

I am fetching company logos using react redux in a one component from [clearbit][1], and slicing to display 4 logos like this Results.slice(0, 4).map((item) => ( <Logo /> in a different component. Now I want to create focus on the first logo to the right and navigate using left/right keys. This is what I have […]

How to use React Hooks in class component?

Can I use functional component in class component? I am going to call a function which is extracted from functional component in class component. But it is giving error like the following. Unhandled Rejection (Error): Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for […]

How to pass props through Link

Fairly new to react here. I’m making a small recipe finder app with an api. After getting the data, I’m mapping through the results and displaying them in a component. What I want to do is display the details of each recipe through another component in another route. I’m not sure how to do this. […]

hookstate combine asynchronous state with Initial extension

I’m using @hookstate/core for learning purposes, I’m trying to create an app who initially loads data using an asynchronous API call, then according to a search bar component loads other data the same way I did initially. The thing is, when I clear the search bar, the page should show the first fetched data. I […]

React input to filter to chart. How convert a hardcoded number into a variable?

I have created in React a filter to show my data in a chart. The filter and the chart are working well but only when i manually hardcode the value to be filtered. The problem is that now when i wanted to include an input field and a submit button to have a dynamic chart, […]

react hooks: Pass a state setter as an argument to an async function

Tl;Dr – Can I pass a useState setter to as an argument to an async function? The async function would make a request and then on a success, store the response using the state setter. Demonstration const getResource = async (setResponse) => { const apiResponse = await axios.get(<Some_URL>) if (apiResponse) { setResponse(apiResponse) } } SomePage […]

Can change an object(element) in an external component?

I want change area (element) when i call changeArea method on another component. I want to like do this. First, App.js export default function App(props) { const [area, setArea] = React.useState(<><Button/><Button/></>) const changeArea = (element) => { setArea(element); } return ( <div> {<area/>} <ChildApp changeArea={changeArea}/> </div> ); } And, ChildApp.js export default function ChildApp(props) { […]

UseEffect not working in child component when reloading

I have a website with 1 child component and the parent both have useEffect, but when reloading the page, only the parent component’s useEffect runs, the child component doesn’t. I have used async await but it still doesn’t work. Thank you for your answer! Here ‘re my code: Child component const getQuantityByID = () => […]

The function created by useCallback didn’t receive latest value of the dependency

I know this question has been asked many times, and I know how useCallback works, but my question is related to antd UI framework(Or maybe it doesn’t matter). I made a minimal, reproducible example: import React, { useState, useCallback } from "react"; import ReactDOM from "react-dom"; import { Form, Input, Button, Table } from "antd"; […]

React doesn’t render array [duplicate]

my React code doesn’t works. I’ve an array, and, for each item, I need to render a card. But it doesn’t works. This is all the code: const Home: NextPage = () => { const [servers, setServers] = useState({}); async function getServers() { console.log(‘ready’); const response = await fetch(‘http://localhost:3000/server/servers’).then( (res) => res.json() ); setServers(response); console.log(response); […]

How does prevState in new useState in React work ?? How does it store the value of previous state?

I know how to use prevState in new State, I want to know how does it actually works ?? How does this functionality works ?? why on putting in ‘prevValue’ in ‘setFullName’ function changes its value ? import React, { useState } from "react"; function App() { const [fullName, setFullName] = useState({ firstName: "", lastName: […]

How to check "Type" user passed in custom hook in React typescript?

I am creating a custom hook to fetch json from api. I am using this hook for different type of data. So i need to set the type whenever i use this hook. Based on the type I use hook should parse data and return the parsed data which should contain data of our desired […]

How to have json data dynamically in javascript variable?

I have the following reactjs code – const [interviewerDetails,setinterviewerDetails] =useState([]); useEffect(()=>{ const getinterviewerDetails= async ()=>{ const data1 = await axios.get("http://localhost:8083/api/GetProduct") .then(response => { console.log("role is "+response.data[0].role) setinterviewerDetails(response.data) console.log(interviewerDetails) }) .catch(error => { console.log(error) }) setinterviewerDetails(data1); }; getinterviewerDetails(); },[]) console.log("interviewerDetails : ", interviewerDetails) Which is giving the following response in console – Now, I want to […]

In react, export variable is always returning false even though we are setting the state to true in UseEffect Hook

Login.jsx import * as React from ‘react’; import Avatar from ‘@mui/material/Avatar’; import Button from ‘@mui/material/Button’; import CssBaseline from ‘@mui/material/CssBaseline’; import TextField from ‘@mui/material/TextField’; import FormControlLabel from ‘@mui/material/FormControlLabel’; import Checkbox from ‘@mui/material/Checkbox’; import Link from ‘@mui/material/Link’; import Paper from ‘@mui/material/Paper’; import Box from ‘@mui/material/Box’; import Grid from ‘@mui/material/Grid’; import LockOutlinedIcon from ‘@mui/icons-material/LockOutlined’; import Typography from ‘@mui/material/Typography’; […]

ReactJS – Get two divs two follow each others scrolling

I have two divs one is master and the other one is slave, I would like slave and master to follow each others scrolling. master will always have the same width and height but slave can have any width and any height. Problem: when I start scrolling it triggers an infinite loop because I’m using […]

React doesn’t update data for loops

I’ve this problem with React: <div className="container"> <div className="row"> {servers.database?.map((server, index) => ( <div className="col"> <div className="card" style={{ width: "18rem", backgroundColor: "#101114", color: "white", marginTop: "80px", borderRadius: "15px", boxShadow: "4px 3px 5px 0px #7335fb" }}> <img src="https://cdn.discordapp.com/icons/843104500713127946/a_91371d39bec9e454d0f4ccacbfaea9f8.gif?size=512" className="card-img-top" alt="Icona server" style={{ borderRadius: "50%", width: "96px", marginLeft: "20px", marginTop: "60px" }} /> <div className="card-body"> <h5 className="card-title">{servers.bot?[index].name […]

setting the value of more than one input

I am trying to build a login form. I am trying to set up the value of the email & password field individually. But as soon as I try to enter the text in the email text field, the same appears in the password field too. Can I have a solution to this? Below is […]

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.