Questions tagged [react-class-based-component]

230 questions
27
votes
5 answers

Is React super(props) deprecated?

I've always used something similar to class MyComponent extends React.Component { constructor(props) { super(props) this.state = { var1 : undefined, var2 : 'etc...', } } } But today I…
joedotnot
  • 4,810
  • 8
  • 59
  • 91
18
votes
2 answers

How to properly type a React ErrorBoundary class component in Typescript?

Here is my current attempt on how to properly type a React ErrorBoundary class component in Typescript: import React from "react"; import ErrorPage from "./ErrorPage"; import type { Store } from "redux"; // I'M PASSING THE REDUX STORE AS A CUSTOM…
5
votes
1 answer

ApolloProvider client - how to access from React Class component?

I am building React App and need to use class components. I have an ApolloClient set up in index.js and it is passing the client to the ApolloProvider. How do I access it in my App component (class component)? Is it even possible? I also have setup…
5
votes
1 answer

Creating anchor with onClick that React handles

I have a React Component that renders a
    and inserts
  • elements based on state. class SimpleComponent extends React.Component { constructor(props) { this.state = { menu_items: [name: "First", id: 10] } this.clickMenu =…
Andy Gauge
  • 1,428
  • 2
  • 14
  • 25
4
votes
2 answers

How to map images in reactjs

So in a Reactjs class component, I have an array in my state like this: myArray: [ { number: 1, title: 'Users', image: '../../../assets/images/website/homepage/users.png' }, { number: 2, title: 'Clients', image:…
Olawale Oladiran
  • 561
  • 2
  • 11
  • 19
2
votes
0 answers

ComponentDidMount is not calling all of the functions inside it

I am working on react class component socket-related project. I have implemented different components with socket and everything seems to work fine. But now I am trying to call multiple sockets inside the componentDidMount. But only the first socket…
2
votes
1 answer

Call function of Context in react class component

I have following Code in my Context.js: import { createContext, useEffect, useReducer } from "react"; import Reducer from "./Reducer"; const INITIAL_STATE = { user: JSON.parse(localStorage.getItem("user")) || null, isFetching: false, error:…
2
votes
0 answers

trying to fetch data using api in react using class based component but don't know why data are not fetching

App.js from "react-router-dom"; import React, { Component } from "react"; import News from "./components/News"; export class App extends Component { render() { return (
2
votes
0 answers

how to add dependency array to a component did mount in react class component

hi i am using react class component and would want to know that is it possible to create a dependency array for component Did Mount, like in use Effect
zaid
  • 25
  • 7
2
votes
0 answers

Too many useCallback, useEffect, useMemo.. is this what React hooks is supposed to be?

After using class components for some years, I embraced fully the new way of writing functional components and hooks. Instead of the deprecated componentWillReceiveProps where we compare a lot of props and write impossible to understand logic, we…
2
votes
2 answers

How to use setState after a css transition ends in React JS?

//sample piece of codes constructor() { super() this.state.opacity= '0' this.state.mover = 'translateY(-40%)' } this.setState({opacity:'1'}) this.setState({mover: 'translateY(-900%)'}, () => {this.setState({opacity:'0'})}) when I click…
2
votes
2 answers

Passing Props to grandchild React

Child: class Plus extends React.Component{ constructor(props){ super(props) this.handleClick = this.handleClick.bind(this) } handleClick(){ console.log('It's Working!') this.props.handleButtonChange() } render(){ …
2
votes
1 answer

Converting class component to functional component TypeError: users.filter is not a function

Making a employee directory and I'm trying to convert class component into functional component. The nav, search, and table will render but the call to the api isn't working. Getting a TypeError: users.filter is not a function Here is the class…
2
votes
0 answers

why in react classes don’t minify very well and they make hot reloading flaky and unreliable

I'm a beginner learning react js and I ask a lot of questions even if it looks simple. In the Introduction of hooks section, It is mentioned It’s hard to reuse stateful logic between components Complex components become hard to understand Classes…
Vikas Acharya
  • 3,550
  • 4
  • 19
  • 52
2
votes
3 answers

Condition in React Class to modify style

--> DEMO CODE <-- I'm trying to make when the word is found the word inside the TIP popup is crossed out. Code when is word is found verifyFindWord = (words) => { for (let word of words) { let lettersSelected =…
1
2 3
15 16