Hey there! I am using a RoundedButton component with a div tag for setting dynamic text, followed by a button.
In my App.js, I have utilized this component thrice. However, when a user clicks on any button, the "User selected" text should display above that specific button. Currently, it is only showing above the first button regardless of which button is clicked.
RoundedButton.js
class RoundedButton extends Component {
constructor(props) {
super(props);
}
_handleButtonClick(item) {
this.props.clickitem(item.buttonText);
//document.getElementById("who_played").innerHTML = "User selected";
}
render() {
let buttonText = this.props.text;
return (
<div className="WhoPlayed">
<div id="who_played" style={{ marginLeft: 5 }} />
<div>
<button
type="button"
className="Button"
onClick={this._handleButtonClick.bind(this, { buttonText })}
>
{buttonText}
</button>
</div>
</div>
);
}
}
export default RoundedButton;
App.js
import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import RoundedButton from "./RoundedButton";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import * as actions from "./actions/index";
class App extends Component {
constructor(props) {
super(props);
this.state = {
score: 0,
status: ""
};
this.clickitem = this.clickitem.bind(this);
}
clickitem(user) {
var url = "http://localhost:4000/generate-random";
document.getElementById("who_played").innerHTML = "User selected";
fetch(url)
.then(response => {
if (response.status >= 400) {
throw new Error("Bad response from server");
}
return response.json();
})
.then(data => {
var computer = data.item;
if (
(user === "Rock" && computer === "Scissors") ||
(user === "Paper" && computer === "Rock") ||
(user === "Scissors" && computer === "Paper")
) {
this.props.increment();
} else if (user === computer) {
this.props.doNothing();
} else {
this.props.decrement();
}
});
}
render() {
return (
<div className="CenterDiv">
<div className="AppTitle">
<b>Score: {this.props.score}</b>
<div>
<RoundedButton text="Rock" clickitem={this.clickitem} />
<RoundedButton text="Paper" clickitem={this.clickitem} />
<RoundedButton text="Scissors" clickitem={this.clickitem} />
</div>
<div className="Status">{this.props.status}</div>
</div>
</div>
);
}
}
function mapStateToProps(state) {
return { score: state.score, status: state.status };
}
export default connect(mapStateToProps, actions)(App);
Current Status:
https://i.sstatic.net/zqzDS.png
Expected Result:
https://i.sstatic.net/Pta7M.png
Any advice on what could be going wrong here?