Spotlight in React Js - reactjs

Question

I created the spotlight using react js. I am not able to click the objects below it. I tried to apply pointerEvents: 'none' to the styling but that doesn't move the spotlight. How should I make the objects below clickable?
Here is the code:-
import React from 'react';
export default class Spot extends React.Component {
constructor(props) {
super(props);
this.state = { x: 0, y: 0};
}
_onMouseMove(e) {
this.setState({ x: e.screenX , y: e.screenY });
}
render() {
const { x, y } = this.state;
return (
<div className={'spot'} onMouseMove={this._onMouseMove.bind(this)}
style={{background: `radial-gradient(${this.props.height}px
${this.props.width}px at ${x}px ${y}px , transparent 90%,
${this.props.color})`, top: '0', bottom: '0', left: '0', right:
'0', position: 'absolute'}}>
</div>
);
}
}
Here is the other component:-
import React from 'react'
import Scene from '../components/Scene'
import Sobject from '../components/Object'
import Room from '../images/level1/Room.png'
import Spot from './Spotlight.js'
export default class Level1 extends React.Component {
constructor(props) {
super(props)
}
clickIt(){
console.log('room')
}
render() {
return (
<div>
<Scene>
<Sobject name={'room'} xPos={0} yPos={0}>
<img src={Room} height="725" width="1536" onClick=
{this.clickIt.bind(this)} />
</Sobject>
<Spot height={200} width={200} color={'rgba(0,0,0,0.91)'} />
</Scene>
</div>
)
}
}

Answer 1

Refactor level1 component to be as follow:
Please note the importance of the components sequence, if you put Spot after Sobject it will not work.
Other below points are just code refactoring
Use arrow functions instead of bind(this).
For rendering components inside each other, instead of using {this.props.children} you could just import the component inside the parent component and added there, unless you have a specific reason for that
// level1 component
import React from "react";
import Scene from "../components/Scene.js";
import Sobject from "../components/Object.js";
import Spot from "./Spotlight.js";
export default class Level1 extends React.Component {
render() {
return (
<div>
<Scene>
<Spot height={200} width={200} color={"rgba(0,0,0,0.91)"} />
<Sobject name={"room"} xPos={0} yPos={0}/>
</Scene>
</div>
);
}
}
//spotlight component
import React from "react";
export default class Spot extends React.Component {
state = { x: 0, y: 0 };
_onMouseMove =(e) =>{
this.setState({ x: e.screenX, y: e.screenY });
}
render() {
const { x, y } = this.state;
return (
<div
className={"spot"}
onMouseMove={this._onMouseMove}
style={{
background: `radial-gradient(${this.props.height}px ${
this.props.width
}px at ${x}px ${y}px , transparent 90%, ${this.props.color})`,
top: "0",
bottom: "0",
left: "0",
right: "0",
position: "absolute"
}}
/>
);
}
}
// Scene component
import React from "react";
export default class Scene extends React.Component {
renderObjects = () => this.props.children;
render() {
return (
<div
className={"scene-container"}
style={{ position: "absolute", height: "100vh", width: "100%" }}
>
{this.renderObjects()}
</div>
);
}
}
//object component
import React from "react";
export default class Sobject extends React.Component {
click =() =>{
console.log("clicked");
}
render() { // below we use default values in case the prop is not there
const { name = "", type = "generic", xPos =0, yPos =0, ismoving =false} = this.props;
return (
<div
className={"object-container"}
style={{ left: xPos, top: yPos, position: "absolute" }}
>
<h1 onClick={this.click}>Hello</h1>
</div>
);
}
}