Questions tagged [react-class-based-component]
230 questions
1
vote
1 answer
React extends for function component?
I have a class component that extends another class component:
export default class MyLittleComponent extends TheBigBoy
Now I need to refactor MyLittleComponent to functional component so it works with hooks etc. But then I lose everything…
Wordpressor
- 7,173
- 23
- 69
- 108
1
vote
0 answers
React - Intersection Observer in Class-Based Component
I am working on a bar website for a friend and I have a problem: Right after the hero section of this menu page, there is a category-selector, which should have navigational buttons to the left and right.
Problem: Sometimes these don't get rendered,…
Feldmanovitch
- 71
- 7
1
vote
1 answer
Is it better to put new functions inside or outside React lifecycle methods?
In a react class component, I have a new function to add to a lifecycle method. I am trying to figure out if it is better to have:
componentDidUpdate() {
const myFunc = () => {
// Do something
}
myFunc();
}
Or:
const myFunc…
Ryan Williams
- 119
- 2
- 8
1
vote
0 answers
In react.js i fetch the news API and i try to show into a card class based component but while i try iterate the component its shows error
`during the iteration the class based component to show the fetch data from api the error occure
// import PropTypes from 'prop-types'
import React, { Component } from 'react'
import Newsitem from './Newsitem';
export default class News extends…
Khalid Hussain
- 11
- 2
1
vote
1 answer
How do I use an asynchronous function to pass data to a Select component in a React class component?
I am trying to use MenuItem components with a React class component to display an array of strings as dropdown options in a Select component.
In this snippet of code, I'm trying to retrieve these MenuItem components from the getGitRepoBranches(url)…
Mhanna112
- 15
- 3
1
vote
0 answers
React Ant design file upload only xlsx file validation
beforeUpload: file => {
const isPNG = file.type === 'application/vnd.ms-excel';
if (!isPNG) {
message.error(`${file.name} is not a XL file`);
}
return isPNG || Upload.LIST_IGNORE;
},
name: 'file',
…
Deepak Deepak
- 11
- 1
1
vote
1 answer
Converting function in constructor to functional component in react class based component
I am trying the convert class based component to the functional component.
I'm basically trying to connect to a socket and I couldn't come up with a solution on how to separate this function.
constructor(props) {
super(props);
this.state =…
Baloylu_unzi
- 13
- 3
1
vote
4 answers
Converting class based component into functional based component and using react hooks
I am learning ReactJs and I am trying to implement below react classs based component into functional component but I am having difficulties in it. When I implement this into functional component it does not updates the webpage.
I have imported…
Prince Singh
- 87
- 6
1
vote
0 answers
React Native: Why is shouldComponentUpdate being called when neither props nor state have changed?
In my React Native app I have a PureComponent where I log whether props or state have changed each time shouldComponentUpdate() is called, like this:
shouldComponentUpdate(nextProps, nextState) {
console.log(JSON.stringify(this.props) ===…
gkeenley
- 6,088
- 8
- 54
- 129
1
vote
1 answer
componentWillUnmount called before component unmounts
I'm trying to understand when componentWillUnmount is called. I have this class-based component:
class ClassComponent extends React.Component {
constructor(props) {
super(props);
this.state = { date: new Date().toLocaleString()…
Sam
- 41
- 3
1
vote
1 answer
React class based components update state based on previous state
I have class based components in my React application. I have a checkbox that will pass a string and a number value when checked.
My state currently looks like this:
state = {
checked: [],
checkedWeight: 0,
};
And what I could like to…
Melanie Sigrid
- 15
- 4
1
vote
1 answer
Cannot update during an existing state transition (such as within `render`).when trying to update state with value which comes from context.js
I am getting getSingleProduct function from context . and passing items id . This returns array of 1 object. Now I want to pass this item into this.state.singleItem above but I get this error.. I have also tried to store this data into context.js 's…
irakli777
- 41
- 5
1
vote
1 answer
TypeError: Cannot read property 'child' of undefined during mounting in enzyme unit tests
I need to mount a class component as I need to test all the components being rendered by it. But I think I am making some mistake in passing the props in it. This is my component:
class Marketing extends PureComponent {
constructor(props) {
…
Gareema
- 21
- 1
- 5
1
vote
1 answer
The react state is not changing when I am trying to change it
I have a state isCartACtive when I am trying to close it running
// Function that will show the cart
handleCartActive(){
console.log("cart active",this.state.isCartActive);
this.setState(prevState =>({
…
sarangkkl
- 773
- 3
- 15
1
vote
2 answers
React - start searching when the user stops typing
I have searchInput in my app to search between an array of objects.
I want to start searching when the user stops typing.
Where is better to clear the timeout? and how?
this is my searchInput:
hossein fti
- 900
- 1
- 6
- 12