Develop Reference

Is there any way to change state inside render in React js?

So I am working on a dice application where I have a class component for setting the number of dice and sides of each dice with up and down buttons. My problem is that each time I press up or down button to set number of sides or number of dice, an array of random numbers gets created and displays on screen. However, I want the value to display only when the roll button is clicked.
So is there a way I can change the state of displayDice to false after I have created the array in the render, so that it only becomes true when I click roll button again

You can move logic to componentDidMount. Render is to just render UI. No business logic. It will handle event and delegate to state.
Move generate random to parent component, pass method rollChange from parents to child.
// Dice component
class SideAndDice extends React.Component {
constructor(props) {
super(props);
this.state = { sides: 6, dice: 1, randoms: this.generateRandom() };
}
increaseDice() {
this.setState({ dice: this.state.dice + 1 });
}
decreaseDice() {
if (this.state.dice > 1) {
this.setState({ dice: this.state.dice - 1 });
}
}
increaseSides() {
this.setState({ sides: this.state.sides + 1 });
}
decreaseSides() {
if (this.state.sides > 2) {
this.setState({ sides: this.state.sides - 1 });
}
}
generateRandom() {
let randoms = [];
for (var i = 0; i < this.state.dice; i++) {
var randomValue = Math.floor(Math.random() * this.state.sides + 1);
randoms.push(randomValue);
}
return randoms;
}
onRollDice() {
this.setState({ randoms: this.generateRandom() });
}
render() {
return (
<div>
<h1>Number of Sides</h1>
<h2>{this.state.sides}</h2>
<button onClick={this.increaseSides.bind(this)}>Up</button>
<button onClick={this.decreaseSides.bind(this)}>Down</button>
<h1>Number of Dice</h1>
<h2>{this.state.dice}</h2>
<button onClick={this.increaseDice.bind(this)}>Up</button>
<button onClick={this.decreaseDice.bind(this)}>Down</button>
<CreateScores
randoms={this.state.randoms}
rollChange={this.rollChange.bind(this)}
/>
</div>
);
}
}
class CreateScores extends React.Component {
render() {
return (
<div>
<button onClick={this.props.onRollDice.bind(this)}>Roll</button>
<br />
<br />
{this.props.randoms.map(random => (
<Dice key={i} diceNumber={randomValue} />
))}
</div>
);
}
}

react.js antd modal wrong behaviour

So I have this big messy component, I will try to slim it down, however keep most of it since I am unsure at this point what could be cause.
The issue is, that the game works as expected. When it is time for the modal to render, it appears at the bottom left of the page, with no styling floating left. The functionality however works as expected, the buttons work and it displays the raw content.
import { Modal } from 'antd';
//rest of imports
const initialState = {
visible: false,
streak: 0,
score: 0,
turn: 0,
previousPicks: [],
result: { result: "", player: "", computer: "" }
};
class Game extends React.Component {
constructor(props) {
super(props);
this.turnLimit = 10;
this.state = initialState;
}
componentWillUnmount() {
this.setState(initialState)
}
updateScore = () => {
//handles score
}
updatePreviousPicks = () => {
//update game data
}
onClickHandler = async (choice) => {
//fetching data from backend
self.showModal();
}
getAIResult = () => {
//
}
showModal = () => {
if (this.state.turn === 10) {
this.setState({
visible: true,
});
}
}
handleOk = () => {
this.setState(initialState)
}
handleCancel = () => {
this.setState(initialState)
}
render() {
return (
<div>
<div>
<Modal
title="Basic Modal"
centered={true}
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}></Modal>
</div>
<div className="container">
<div id="rockDiv" className={`choice`} onClick={() => this.onClickHandler("rock")}>
<Choices choice="rock"></Choices>
</div>
<div id="paperDiv" className={`choice`} onClick={() => this.onClickHandler("paper")}>
<Choices choice="paper"></Choices>
</div>
<div id="scissorsDiv" className={`choice`} onClick={() => this.onClickHandler("scissors")}>
<Choices choice="scissors"></Choices>
</div>
<Score score={this.state.score} bonus={this.state.streak} turn={this.state.turn} />
<div id="PlayerResult" className={this.state.result.result} >
{this.state.turn >= 1 ? <p>You</p> : <p></p>}
<Answer choice={`${this.state.result.player}`} />
</div>
<div id="AIResult" className={this.getAIResult()} >
{this.state.turn >= 1 ? <p>AI</p> : <p></p>}
<Answer choice={`${this.state.result.computer}`} />
</div>
</div>
</div>
)
}
}
export default Game
I have tried removing all CSS from the component, and still the modal does not show with the default antd design?

As I understand that current style you have doesn't like example of Antd.
Missing is you didn't import styles of Antd like this.
import { Modal, Button } from "antd";
import "antd/dist/antd.css";
Just need import style you will have what you need.
You can check my example here https://codesandbox.io/embed/8lr93mw8yj

<Modal
title="Basic Modal"
centered="true"
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}></Modal>
You do not need to wrap the "true" in brackets here as you are not calling a variable.

How to fix error of hiding and showing <div> in React

I am working on a project and i want to display a hidden <div> below another <div> element using an event handler but when i click the icon that is meant to display the div, the whole page becomes blank
This is image I want:
This is what i get
I have tried to check through the internet for some places where i could get the solution. Well i found something similar to what i had done but the error still happens for me.
class PostItTeaser extends Component {
state = {
postIt: false,
moreIt: false,
}
togglePostIt = e => {
e ? e.preventDefault() : null
this.setState({ postIt: !this.state.postIt })
}
_toggle = e => {
e ? e.preventDefault() : null
this.setState({
moreIt: !this.state.moreIt,
})
}
Child = () => <div className="modal">Hello, World!</div>
render() {
let { postIt } = this.state
let { moreIt } = this.state
let {
type,
group,
disabled,
session: { id, username },
} = this.props
return (
<div>
<div
className="post_it inst"
style={{ marginBottom: type == 'group' && 10 }}
>
<img src={`/users/${id}/avatar.jpg`} alt="Your avatar" />
<div className="post_teaser">
<span
className="p_whats_new"
onClick={disabled ? null : this.togglePostIt}
>
What's new with you, #{username}? #cool
</span>
<span className="m_m_exp" data-tip="More" onClick={this._toggle}>
<MaterialIcon icon="expand_more" />
</span>
</div>
</div>
{moreIt && <Child />}
{postIt && (
<PostIt back={this.togglePostIt} type={type} group={group} />
)}
</div>
)
}
}

From skimming through the code I believe you need to bind the scope, since the function you're calling is using this.setState, it needs this to be the react component, not the event you're listening to:
onClick={this._toggle.bind(this)}
You can also bind the functions scope in the constructor. Or, a less memory performant & ugly way:
onClick={() => { this._toggle(); } }

Component not re rendering even after calling the setState

I have a react component in which user can upload Image and he's also shown the preview of uploaded image. He can delete the image by clicking delete button corresponding to Image. I am using react-dropzone for it. Here's the code:
class UploadImage extends React.Component {
constructor(props) {
super(props);
this.onDrop = this.onDrop.bind(this);
this.deleteImage = this.deleteImage.bind(this);
this.state = {
filesToBeSent: [],
filesPreview: [],
printCount: 10,
};
}
onDrop(acceptedFiles, rejectedFiles) {
const filesToBeSent = this.state.filesToBeSent;
if (filesToBeSent.length < this.state.printCount) {
this.setState(prevState => ({
filesToBeSent: prevState.filesToBeSent.concat([{acceptedFiles}])
}));
console.log(filesToBeSent.length);
for (var i in filesToBeSent) {
console.log(filesToBeSent[i]);
this.setState(prevState => ({
filesPreview: prevState.filesPreview.concat([
<div>
<img src={filesToBeSent[i][0]}/>
<Button variant="fab" aria-label="Delete" onClick={(e) => this.deleteImage(e,i)}>
<DeleteIcon/>
</Button>
</div>
])
}));
}
} else {
alert("you have reached the limit of printing at a time")
}
}
deleteImage(e, id) {
console.log(id);
e.preventDefault();
this.setState({filesToBeSent: this.state.filesToBeSent.filter(function(fid) {
return fid !== id
})});
}
render() {
return(
<div>
<Dropzone onDrop={(files) => this.onDrop(files)}>
<div>
Upload your Property Images Here
</div>
</Dropzone>
{this.state.filesToBeSent.length > 0 ? (
<div>
<h2>
Uploading{this.state.filesToBeSent.length} files...
</h2>
</div>
) : null}
<div>
Files to be printed are: {this.state.filesPreview}
</div>
</div>
)
}
}
export default UploadImage;
My Question is my component is not re-rendering even after adding or removing an Image. Also, I've taken care of not mutating state arrays directly. Somebody, please help.

Try like this, I have used ES6
.

Jest: Unit test toHaveBeenCalled() not working

I have a small component in React which generates two random numbers on render, then asks the user to submit the sum of these numbers and if they are correct, increment their score.
The following code handles this game and works as intended in the browser:
import React, { Component } from 'react';
export const randomNumber = () => {
var maxNumber = 10;
var randomNumber = Math.floor((Math.random() * maxNumber) + 1);
return randomNumber;
}
class Arithmetic extends Component {
constructor(props) {
super(props);
this.state = {
value: '',
numbers: {
x: randomNumber(),
y: randomNumber()
},
score: ''
}
this.updateVals = this.updateVals.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
}
updateVals() {
this.setState({
numbers: {
x: randomNumber(),
y: randomNumber()
},
score: this.state.score + 1
});
}
componentDidMount() {
this.setState({
score: 0
});
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
var isCorrect = this.state.numbers.x + this.state.numbers.y == this.state.value ? this.updateVals() : alert("Try again");
event.preventDefault();
}
render() {
return (
<section className="arithmetic">
<div className="arithmetic__game">
<div className="row arithmetic__row--details">
<div className="arithmetic__score">
Score: {this.state.score}
</div>
<div className="arithmetic__timer">
</div>
</div>
<div className="row arithmetic__row--main">
<div className="arithmetic__examples">
1 + 1 = 2<br/>
2 + 1 = 3<br />
</div>
<div className="arithmetic__game-container">
What is {this.state.numbers.x} + {this.state.numbers.y}?
<div className="arithmetic__form-container">
<form onSubmit={this.handleSubmit}>
<label>
Answer:
<input className="input-field" type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<button className="btn-submit" type="submit" onClick={(e) => (this.handleSubmit) ? this.handleSubmit(e) : null}>Submit</button>
</form>
</div>
</div>
</div>
</div>
</section>
);
}
};
However, when trying to check whether or not updateVals is called when the sum of both numbers is entered correctly, this fails. I have checked to see if handleSubmit is called on simulation of the "Submit" button being clicked, and it is called. I have also checked the values of the value and numbers props to see if the states have been correctly updated, which they have.
However, when updateVals is called, the score is incremented (and again, this is shown in the browser). But when I try to simulate this in Jest, the score remains at 0 as it is when it is initialised.
My test is as follows:
it("passes with correct input", () => {
const updateVals = jest.fn();
const handleSubmit = jest.fn();
Arithmetic.prototype.updateVals = updateVals;
Arithmetic.prototype.handleSubmit = handleSubmit;
let wrapper = mount(<Arithmetic />);
wrapper.find('.input-field').instance().value = wrapper.update().state().numbers.x + wrapper.update().state().numbers.y;
expect(wrapper.find('.input-field').instance().value).toEqual((wrapper.update().state().numbers.x + wrapper.update().state().numbers.y).toString());
wrapper.find('.input-field').simulate('change');
wrapper.find('.btn-submit').simulate('click');
console.log(wrapper.update().state().numbers.x, wrapper.update().state().numbers.y, wrapper.update().state().value);
expect(updateVals).toHaveBeenCalled();
});
Running tests in the terminal shows that, for instance, if the numbers.x is 1 and numbers.y is 9 then the value key in state is '10'. I'm not sure why when I test handleSubmit, it gets called and the test passes but updateVals does not.

I managed to get this working, I removed any events from the submit button and tested the form itself which already calls onSubmit and tested that the score itself updated in the state.
it("passes with correct input", () => {
const wrapper = shallow(<Arithmetic />);
const preventDefault = jest.fn();
const currentScore = wrapper.update().state().score;
wrapper.find('.input-field').simulate('change', {target: {value: wrapper.update().state().numbers.x + wrapper.update().state().numbers.y}});
wrapper.find('.main-form').simulate('submit', { preventDefault });
expect(wrapper.update().state().score).toEqual(currentScore+1);
});