how to compare state variables of 2 components in react? - reactjs

Question

I've a component, whose state has a variables that stores a random value of 0-3, I have 2 of this in my app.js, now I want to compare the state of the this 2 components. please help.
this is my component.
import React from "react";
export default class player extends React.Component {
constructor(...args) {
super(...args);
this.state = {
shoot: 0
};
}
shooter = () => {
this.setState({ shoot: Math.floor(Math.random() * Math.floor(3)) });
}
render() {
return (
<div>
<h1>{this.state.shoot}</h1>
<button onClick={() => this.shooter()}>shoot it</button>
</div>
);
}
}
this is my app.js
import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import Player from "./player";
class App extends Component {
render() {
return (
<div className="App">
<div>
<Player />
<Player />
</div>
</div>
);
}
}
export default App;
How can I compare state.shoot in both <Player /> ? I want to check if both the state.shoot are equal.

Answer 1

I would recommend putting the state in the app component. this way you have more power on the data, for example :
App component:
import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import Player from "./player";
class App extends Component {
constructor(...args) {
super(...aan rgs);
this.state = {
// create array of all your players
players : [{shoot :0}, {shoot :0}]
}
}
shooter = (id) => {
let players = this.state.player
/// maping the new players array
players.map(element, index => {
if(id == index){
element.shoot = Math.floor(Math.random() * Math.floor(3)
}
}
this.setState({players) });
}
checkPlayers = () =>{
// this is example... you can loop over your array and find what you need
if(this.state.players[0].shoot == this.state.players[1].shoot){
return true
}
else{
return false
}
}
render() {
return (
<div className="App">
<div>
{this.state.players.map(i => {
// pass the values to the player component (don't forget the id)
return <Player shoot={i.shoot} shooter={this.shooter} id={i}/>
}
</div>
</div>
);
}
}
export default App;
Player component:
import React from "react";
export default class player extends React.Component {
setShooter = () => {
this.props.shooter(this.props.id)
}
render() {
return (
<div>
<h1>{this.props.shoot}</h1>
<button onClick={this.setShooter}</button>
</div>
);
}
}
export default player;