score:0
I think the problem is you have not created any ref
for wrapRef
. as the Error says cannot get the property of null; so the wrapRef
itself is null
class QuestionListItem extends Component {
constructor() {
super();
this.state = {
isActive: false,
};
this.handleScroll = this.handleScroll.bind(this);
}
componentDidMount = () => {
window.addEventListener('scroll', this.handleScroll);
this.handleScroll();
};
wrapRef=React.createRef();
handleScroll = () => {
const { isActive } = this.state;
const { top } = this.wrapRef.current.style;
if (top > 60 && top < 400 && !isActive) {
this.setState({ isActive: true });
}
if ((top <= 60 || top >= 400) && isActive) {
this.setState({ isActive: false });
}
}
render() {
const { isActive } = this.state;
const { question } = this.props;
return (
<div
className={`Test__questions-item--noactive ${isActive && 'Test__questions-item--active'}`}
ref={this.wrapRef}
>
<li key={question.id}>
<p>
{question.question}
</p>
<QuestionAnswerForm name={question.question} />
</li>
</div>
);
}
}
score:2
As I noticed your code, there you used arrow function with componentDidMount.
It should be:
componentDidMount() {}
also if you are using arrow function with handleScroll then there is no need to bind in the constructor, try to remove it and then modify the handleScroll as follows:
handleScroll = () => {
const { isActive } = this.state;
if (this.wrapRef) {
const { top } = this.wrapRef.getBoundingClientRect();
if (top > 60 && top < 400 && !isActive) {
this.setState({ isActive: true });
}
if ((top <= 60 || top >= 400) && isActive) {
this.setState({ isActive: false });
}
}
}
Also remove function call this.handleScroll() after event listner in the componentDidMount as it is of no use.
Source: stackoverflow.com
Related Query
- Cannot read property 'getHostNode' of null
- Uncaught TypeError: Cannot read property 'props' of null
- Cannot read property 'refs' of null react error react js
- Uncaught TypeError: Cannot read property 'state' of null in react
- Cannot read property 'style' of null - Google Sign-In Button
- cannot read property of null doing destructing
- React component returning cannot read property '__reactInternalInstance$ of null after trying to access array
- Error: Cannot read property 'UIAppFonts' of null
- Cannot read property '_currentElement' of null
- ReactNative - Tapping row in ListView gives error: Cannot read property `_pressRow` of null
- React - Cannot read property 'setState' of null
- Cannot read property 'selectionEnd' of null using React + Jest + Datepicker + TextMask
- Jest test Cannot read property 'Object.<anonymous>' of null
- TypeError: Cannot read property 'name' of null
- TypeError: Cannot read property 'map' of null
- How to get over Cannot read property 'removeEventListener' of null in react
- TypeError: Cannot read property 'createEvent' of null React Apollo testing
- React tutorial: Uncaught TypeError: Cannot read property 'data' of null
- Cannot read property 'getBoundingClientRect' of null
- React: Uncaught TypeError: Cannot read property '_currentElement' of null
- TypeError: Cannot read property 'value' of null in React Form
- Reactjs this.state giving Uncaught TypeError: Cannot read property 'groupsData' of null
- Uncaught TypeError: Cannot read property 'setState' of null
- Cannot read property 'state' of null
- React refs: Cannot read property 'focus' of null
- TypeError: Cannot read property 'getState' of null
- TypeError: Cannot read property 'focus' of null
- TypeError: Cannot read property 'dispatch' of null
- Cannot read property 'company' of null
- Antd Datepicker in Electron - Cannot read property 'year' of null
More Query from same tag
- Warning: This synthetic event is reused for performance reasons React
- Mobx Generic Observer using Typescript typing
- In React-dropzone, how to tell the user the file's maxSize is too big?
- How to use React's context API outside of react's component scope : ReactJS
- Viewing backend data in React JS
- Google ad units (DFP) shows number along with the ad on render. How should I hide that number?
- iterating on react components
- React/Typescript: How do I pass and "type" props down through multiple components
- Issues with setting a const using lodash _.map
- Kill a Child Process in Node.js while still running Server
- How to get rid of the this warning: "Warning: validateDOMNesting(...)"?
- Promises inside WebWorker (react) throwing babel/webpack error
- Render react component inside Blazor page
- How to use downloaded fonts in react?
- How can I make a MaterialUI form control wider when a value hasn't been selected?
- Array of Object - divide information as per values in it
- Text Box coming disabled in React JS using Type Script
- How to transpile JSX in Webpack 4
- Porting WordPress Gutenberg to a Standalone React Component - CSS Styles Not Appearing
- Can't access my state in my requestAnimationFrame function
- Conditional displaying of division REACT
- Why isn't my react component's css updating dynamically?
- How to zoom in and out an image every second?
- CSS, REACT: Cannot position siblings on one line;
- React API Context - Function does not work
- Update one field of one record in data collection using JavaScript immutability-helper or {...data, }
- Change formatDate in datepicker of material ui
- TS2322 Error when extending Button, component property not found. What is the correct way to type?
- How can I make inline styling more compact instead of using multiple variables?
- React & Jest testing: nested component connected to Redux gives Invariant Violation error