News Articles react-component

React child component not rerendering when parent state array updates

blockClasses is a string array state in the Grid class, and I am passing it as a prop to a subcomponent. blockClasses defines the classNames for the Block component. When I change the blockClasses state, it does not update the child component (The className remains the same but the state changed.) I saw someone saying […]

How to update src of <Image /> tag in NextJS without re-rendering the whole component

I want to change the image of a <Image /> tag in NextJS by updating its src with a new link, but it shows too many re-renders. <Image src={itemDetails.imageUrls[0].imageUrl} alt="Product Image" layout="responsive" height="500" width="400" /> I want to change this src to {itemDetails.imageUrls[1].imageUrl} or {itemDetails.imageUrls[2].imageUrl} according to onClick on some other images. I have a […]

Dynamic Function – React lazy a JS Function, not a Component

Using NextJS, I am making a client-side API call to a server-side endpoint. In that server-side script, in older versions of react, I could dynamically import a js file (design.script) within a lower level function. The default export of that js file (design.script) was a basic function that would generate and return a json object. […]

How do I implement a min/max function for my plus/minus counter using react component?

I’m working on a really simple order form with plus/minus counter functions, but I want to set the input quantities to a minimum of 0 and a maximum of 10. How can I implement this? import React, { useState, useEffect } from "react"; import products from "./items"; import "../index.css"; import { View, Text, FlatList, Button, […]

How to set mailto into a property of child react.js component

I am returning data from API in React.js, one property is ’email’ of object ‘user’. I would like to be able to click on the email address so a new email window addressed to that user pops up. I want the email address to appear in the ‘to’ input field. I want this: [email protected] I […]

trying to resolve no-unused-expression error within for loop leads to react component function not working

I’m trying to build a react component that allows a die to be rolled and update the total of the die roll on the page.I’m only including what I perceive to be necessary as the function is pretty long but this should cover the problems I’m having import "./Dice.css"; import img from "./img/D8.png"; class Dice […]

Best way to write onClick multiline function?

I have this onClick function that shows the details of the user and then sets another state back to true. Would it be better to declare this function outside of the return as it is multiline? and if so how should I write it? <Button onClick ={() => {setSelectedUser(user); setShowUser(true);}}>{user.name}</Button> Here the rest of my […]

button onClick works only once in react component with ternary operator

I am fetching data from API and Im displaying the users name in a parent component UserList and when I click on one name, it displays the child component called UserDetails. component). The UserDetail comp contains a button that on click hides that component so the user can go and click on another user’s name […]

Why is my React component rendering my JSX as text rather than HTML?

Please forgive me as I am a complete noob to JavaScript and React. I am trying to output a list of friends. props.friends is an array consisting of the friends’ names. However, my code just outputs the <li> tags as text on the page My code: const Friends = (props) => { return( <div> <p>Hello, […]

How to map array in React [duplicate]

I am trying to map array in react: <div className="row center"> {pokemons.map((pokemon, index) => ( <Pokemon key={index} pokemon={pokemon}></Pokemon> ))} </div> And I am getting this error: TypeError: pokemons.map is not a function For this, I am using this api: https://pokeapi.co/api/v2/pokemon?offset=0&limit=40 and pokemons includes results of the below json: Source: React – Stack Overflow

Interactivity between components React.js

i am trying something in react but i am getting the same error when i try to use in another component Type ‘{}’ is missing the following properties from type ‘RouteComponentProps<RouterProps, StaticContext, unknown>’: history, location, match Does anyone has any idea how i can modify it so i can use it? My code is: import […]

Object iteration in react component render is not working

First, I would like to inform you that am very new to react development. When I tried to render a tab with iteration I got the below error. Can someone kindly help me to identify why this not working. Is there mistake in syntax #Implementation Line 76: Expected to return a value in function array-callback-return […]

Order of execution of react components

I’m trying to understand how things work under the hood inside components when I execute a program in react, and specifically the order of execution of code when a component is created. When I ask this question, people confuse the order of execution of code inside the component with the lifecycle of the component, an […]

React Router Dom Subroutes external file

I am having a problem with React Router Dom. I want to have the routes of my application in an external file and automatically detect the sub-routes and display the component. I did this, but I can’t get it to work. This is my App.jsx import { BrowserRouter as Router, Route, Switch } from ‘react-router-dom’ […]

How to change the background color of a parent component from inside a child component in react, gatsby

I am using react, gatsby and I have 2 components const Landing = ( { children }) => { return ( <div className={container}> <div className={wrapper}> <ZoneButton zone={‘pink’} icon={‘child’} /> <ZoneButton zone={‘blue’} icon={‘code’} /> </div> </div> ) } And, const ZoneButton = ({ zone, icon }) => { const colourPrimaryDict = { ‘pink’: ‘var(–pastel-pink-primary)’, ‘blue’: ‘var(–pastel-blue-primary)’ […]

Getting the error of cloning for react typescript and react router dom at props.history.push

Without passing state to the props.history.push, its work very well but for data with state its give error.DOMException: Failed to execute ‘pushState’ on ‘History’: function transformRequest(data, headers) {normalizeHeaderName(headers, ‘Accept’);normalizeHeaderName(…… } could not be cloned.at globalHistory.pushState. I am getting the following error: history.js:357 Uncaught (in promise) My Code is; import axios from ‘axios’; import React from […]

REACT JS – Function Component Validation

I am a beginner in react. I was working on the react function component with crud. Can anyone please tell how can I apply validation on email text and input text when it is invalid or empty, and show alert if the form is not valid and not continue to next page. > import { […]

React multiple pages

At the moment I’m building my first react web app. I need to create a few pages that hold the same layout and idea, just different content. As I’m fairly new to react I thought to ask here what might be the best solution. I looked at components and using props, but couldn’t really figure […]

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.