Title: Should I use Redux, Context, or hooks? And how to implement
Tags: javascript;reactjs;redux
Question: I'm stuck on the problem of passing my state to functions outside of a class. I'm new to coding in general but I'm pretty sure I need to use either hooks, context, or Redux to complete this. First let me post my code.
class Counter extends Component {
constructor(props) {
super(props);
this.state = {
count: 10,
ran: "",
id: "",
temp: Math.floor(Math.random() * 3 + 1),
draw: {
score: 0
},
user: {
score: 0,
choice: ""
},
pc: {
score: 0,
choice: ""
},
roundLimit: 10,
roundWinner: ""
};
this.setWinner = this.setWinner.bind(this);
this.setWeapon = this.setWeapon.bind(this);
this.battle = this.battle.bind(this);
this.attack = this.attack.bind(this);
}
setWeapon = (pcId, userId) =&gt; {
const [ pcWeaponName, userWeaponName] = [pcId, userId].map(weaponId =&gt; weapons.find(w =&gt; w.weaponId === weaponId).name);
console.log(this.state.pc.choice, pcWeaponName)
this.setState({
user: { score: this.state.user.score, choice: userWeaponName },
pc: { score: this.state.pc.score, choice: pcWeaponName }
});
};
setWinner = (winner = "draw") =&gt; {
const { score, choice } = this.state[winner];
const newScore = score + 1;
this.setState({
roundWinner: winner,
[winner]: { score: newScore, choice }
});
};
battle = userWeaponId =&gt; {
//Get PC Choice
const generatePcWeapon = () =&gt;
[...weapons][Math.floor(Math.random() * weapons.length)];
const pcWeapon = generatePcWeapon();
const { weaponId: pcWeaponId, weaknesses = [] } = pcWeapon;
// Get User Choice
// Compare IDs
if (pcWeaponId === userWeaponId) {
// Update roundWinner to Draw
this.setWinner();
// Return
return;
}
// Search for user choice in PC Weaknesses
this.setWeapon(pcWeaponId, userWeaponId);
const winner = weaknesses.includes(userWeaponId) ? "user" : "pc";
this.setWinner(winner);
};
attack = id =&gt; {
this.battle(id); // your alert function
};
render(props) {
const { user, pc, roundWinner } = this.state;
return (
<&gt;
<div className="container"&gt;
<Container fluid&gt;
<Row&gt;
<Col&gt;
<h5&gt;Rock, Paper, Scissors</h5&gt;
</Col&gt;
</Row&gt;
<Row&gt;
<Col&gt;
<h6&gt; Select Your Weapon </h6&gt;
</Col&gt;
</Row&gt;
{weapons.map(({ name, weaponId }) =&gt; {
return (
<Row key={weaponId}&gt;
<Col&gt;
<WeaponButton
attackAction={this.attack}
id={weaponId}
name={name}
/&gt;
</Col&gt;
</Row&gt;
);
})}{" "}
</Container&gt;
</div&gt;
<ReactInfo
id={user.choice}
ran={pc.choice}
roundWinner={roundWinner}
userPoint={user.score}
pcPoint={pc.score}
/&gt;
</&gt;
);
}
export default Counter;
That is my counter class. These are the alert functionality I am trying to use the states from the class for:
const ScoreRecord = () =&gt; {
const { userPoint, pcPoint } = this.props;
return (
<p&gt;
The score is You:{userPoint} to PC:{pcPoint}
</p&gt;
);
};
export function doAlert ({ props }) {
const { roundWinner, userPoint, pcPoint } = props;
const isSuccess = roundWinner === "User";
const message = isSuccess ? "You won dude." : "Youre fucking lame";
const title = isSuccess ? "Winner" : "Boo";
const DoAlert = (<AlertComponent isSuccess={isSuccess} message={message} title={title}&gt;
<ScoreRecord userPoint={userPoint} pcPoint={pcPoint} /&gt;
</AlertComponent&gt;
);
export function AlertMessageForm ({ children, isSuccess, message, title, scores }) {
return (
<Alert variant={isSuccess ? "success" : "info"} dismissible&gt;
<Alert.Heading&gt;{title}!</Alert.Heading&gt;
<p&gt;{message}</p&gt;
<hr /&gt;
{children}
</Alert&gt;
);
};
And here is the codesandbox link
Any guidance would be appreciated.
Comment: I have checked the sandbox link shared, looks like it's working fine. So What exactly do you mean by *I'm stuck on the problem of passing my state to functions outside of a class*? What you are actually looking for?

Comment: I'm trying to pass the state of the Counter class into the alert.js and scorealert,js functions



{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 0, 'CommentCount': 2, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2020:00:06/18/20', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><reactjs><redux>', 'Title': 'Should I use Redux, Context, or hooks? And how to implement', 'ViewCount': 43, 'id': 62441804, 'user_AboutMe': None, 'user_AccountId': 18658076.0, 'user_DisplayName': 'dakben', 'user_Reputation': 59.0, 'user_Views': 17.0, 'user_id': 13599981.0}}