Develop Reference

REACT connect 4 game - attempt to reset grid over setState but results in "undefined"

I am trying to create a Connect of 4 game in React as an exercise.
If i want to reset the grid or for displaying player points, a reset of my grid is required rather than simply reloading the entire page.
In this case, dealing with my grid via state is a logical step, but after several attempts and variations, I'm unfortunately lost at the moment
In this variation below, this.state.grid always returns undefined on reset (console.log right after render method begins).
I see that the problem is most likely because in the gridHtml function I am already passing the grid to the state via setState.
If I call this.gridHTML() directly on the reset button, my grid completely disappears.
I am very grateful for any help at this point
import React from 'react';
class Grid extends React.Component {
constructor(props) {
super(props);
this.state = {
player: "red",
isGameOver: false,
gamestarts: false
};
this.findLastEmptyColl = this.findLastEmptyColl.bind(this);
this.onMouseEnter = this.onMouseEnter.bind(this);
this.onMouseLeave = this.onMouseLeave.bind(this);
this.onClick = this.onClick.bind(this);
this.checkForWinner = this.checkForWinner.bind(this);
this.gridHtml = this.gridHtml.bind(this);
this.reset = this.reset.bind(this);
};
/*left out MouseEnter, leave, click and win logic , those work fine and to keep it short */
gridHtml() {
let rows = Array(6).fill(0), cols = Array(7).fill(0);
let grid = rows.map((el, i) => {
return (
<div key={i} className="row">
{cols.map((value, index) => {
return (
<div key={index}
onMouseEnter={this.onMouseEnter}
onMouseLeave={this.onMouseLeave}
onClick={this.onClick}
className="col empty"
data-col={index}
data-row={i}>
</div>
);
})}
</div>
);
});
this.setState({
grid: grid
});
}
componentDidMount() {
this.gridHtml();
}
componentWillMount() {
this.gridHtml();
}
reset() {
this.setState({
grid: this.gridHtml(),
isGameOver: false,
gamestarts: false
})
}
render() {
console.log(this.state.grid);
return (
<>
{!this.state.gamestarts && <h4>Connect 4 - Player {this.state.player} begins!</h4>}
{this.state.gamestarts && <h4>Player {this.state.player} </h4>}
{(this.state.isGameOver && !this.state.gamestarts) && <h4>Player {this.state.player} has won</h4>}
<div id="board">
{this.state.grid}
</div>
<div>
<button style={{margin: "30px"}} onClick={() => {this.reset()}}>Reset</button>
</div>
</>
)
}
}
export default Grid;
Update:
I see that my understanding of React doesn't seem to be properly adjusted yet; in my reset() function, due to the asynchronicity of react, I assume that the dynamic assignment via setState of my grid should actually render automatically?
Again, the problem: when I currently press my reset button, the grid is re-created but the moves, red and yellow, are still on the grid as they were; last I thought of writing a function that instead of creating a new grid removes all CSS classes and data properties related to it - but that would make the whole point of doing something like this with React absurd.
To make it even clearer:
if I extend my reset() function with a setTimeout around setState, right after overwriting my grid, it works?! I can understand why but this right now feels like a hack and I don't want to leave it like this, because this is supposed to be the core competence of React? Hope it helps to understand better
reset () {
this.setState({grid: 'some text ... loading '});
setTimeout(() =>{
this.setState({
grid: this.gridHtml(),
isGameOver: false,
gamestarts: true,
player: "red"
});
}, 1000);
}
Hope somebody can explain?
Many thanks

Your gridHtml() function doesn't return anything so grid is being set to undefined. Try adding a return grid; statement to the end.

unique default state/class to react toggle

I have the below, except currently it's setting the minimize class as default. Toggling works fine, I just would like a unique default class to be show at first before any click has happened. After a click, it would then go between maximize and minimize classes as it does now.
If I could keep the below functionality, and just prevent maximize or minimize classes from being added automatically, this should solve the issue, however anytime I try to remove it breaks.
class ToggleIt extends Component {
constructor(props) {
super(props)
this.state = {
expandedTray: false,
}
this.toggleExpandedTray = this.toggleExpandedTray.bind(this);
}
toggleExpandedTray() {
this.setState({ expandedTray: !this.state.expandedTray, });
}
render() {
return (
<div
className={`something--isi-tray ${this.state.expandedTray ? 'expanded-tray' : 'minimize-tray'}`}
onClick={this.toggleExpandedTray}
>
<div className="something--isi-tray__content">
<h3>{this.props.mainHeadingTitle}</h3>
<div
data-rte-editelement
dangerouslySetInnerHTML={{
__html: DOMPurify.sanitize(this.props.isiContent)
}}
/>
</div>
</div>
)
}
}

Toggling works fine, I just would like a unique default class to be
show at first before any click has happened.
If I correctly understood you could set null as initial value in state, and then
this.state.expandedTray === null ? "some-class" : this.state.expandedTray ? 'expanded-tray' : 'minimize-tray'

Toggle prop passed on one of many targets in ReactJS

Just starting off with ReactJS and have a project where I am showing an accordion of issues and including a details area that is hidden on the start.
There is a button in the accordion bar that should pass a prop to the child element to hide or show them. I have refs on the button and on the details child compoment and added a function to call the function and pass the ref of the details area. I am just not sure how to dynamically change the class hidden on one of many areas and not all of them.
Not sure if putting a class on each element and then learning how to toggle the particular child's class is better or changing the prop to the child.
I can get to the change function but am drawing a blank from there and all the googling shows how to do one element with a grand change of state but I need individual elements.
Here is what I have so far.
Parent
...
<AccordionItem key={item.id} className={iconClass} title={`${item.area}`} expanded={item === 1}>
{
item.issues.map(issue => {
let trim = (issue.issue.length>21) ? `${issue.issue.substring(0,22)}...`: issue.issue;
return (
<div className="issue-bar container-fluid">
<div className="row issue-bar-row">
<span className="issue-title"><img src={CriticalRed} alt="Critical"/> {trim}</span>
<span className="btns">
<button className="btn btn-details" onClick={() => this.showDetail(`details-${issue.id}`)}>Details</button>
</span>
</div>
<IssuesDetails ref={`details-${issue.id}`} issue={issue} shouldHide={true} />
</div>
)
})
}
<div>
</div>
</AccordionItem>
...
Child
export default class IssuesDetails extends Component{
render(){
let issueDetails = classNames( 'issue-details', { hidden: this.props.shouldHide } )
return(
<div className={issueDetails}>
<div className="issues-details-title">
<h3>{this.props.issue.issue}</h3>
</div>
<div className="issues-details-details">
{this.props.issue.details}
</div>
<div className="issues-details-gallery">
<ImageGallery source={this.props.issue.photos} showPlayButton={false} useBrowserFullscreen={false} />
</div>
<button className="btn btn-success">Resolve</button>
</div>
)
}
}
Thanks for any help you provide or places you can send me!

If i'm understanding correctly, you need to be able to swap out shouldHide={true} in certain circumstances. To do this, you'll want your parent component to have a state object which indicates whether they should be hidden or not.
Exactly what this state object looks like depends on what sort of data you're working with. If the issues is a single array, then perhaps the state could be an array of booleans indicating whether each issue is expanded or not. I suspect you may have a more nested data structure, but i can't tell exactly since some of the code was omitted.
So assuming you have an array, it might look like this (i've omitted some things from the render method for brevity):
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
hidden: (new Array(props.issues.length)).fill(false),
};
}
showDetail(index) {
let newHidden = this.state.hidden.slice();
newHidden[index] = true;
this.setState({
hidden: newHidden
});
}
render() {
return (
<AccordionItem>
{this.props.issues.map((issue, index) => {
<div>
<button onClick={() => this.showDetail(index))}/>
<IssuesDetails issue={issue} shouldHide={this.state.hidden[index]}/>
</div>
})}
</AccordionItem>
);
}
}

Take a look at these:
https://codepen.io/JanickFischr/pen/xWEZOG
style={{display: this.props.display}}
I think it will help with your problem. If you need more information, please just ask.

React.js won't render in my Codepen

I'm trying to create a counter and I can't get what's in the render to show on the page.
Here is my code in JS from Codepen (with React and ReactDOM added in external JS)
class Counter extends React.Component {
constructor() {
super();
this.state = {
};
this.flash = "";
this.count = 0;
}
componentWillReceiveProps(nextProps) {
var newValue = nextProps.count;
if (this.count !== newValue) {
this.flash = this.flash === "flash1" ? "flash2" : "flash1";
}
}
render () {
return (
<div id="counter">
<button>+</button>
<button>-</button>
<div id="count" className={this.flash}>
{this.count}
</div>
</div>
);
};
}
ReactDOM.render(<Counter />, document.getElementById('countContainer'));
I can see in my JS code that normally the should be the color brown in my Codepen, so I'm obviously missing something (it's currently yellow).
In my HTML I have the following
<div id="countContainer">
</div>
Note: I'm not done with the code in regards to what it should be able to do in the end. I figured I should try and get it to render on the page before I continue.
My codepen is: URL

I tried this and got an error at the line where the first JSX tag is inside render(). I fixed it by adding the Babel preprocessor in addition to React and ReactDOM.

You can try this code to get the counter working with both increment and decrement count .
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count :0
};
this.increment=this.increment.bind(this);
this.decrement=this.decrement.bind(this);
}
increment(){
this.setState({count:this.state.count+1});
}
decrement(){
this.setState({count:this.state.count-1});
}
render () {
return (
<div id="counter">
<button onClick={this.increment}>+</button>
<button onClick={this.decrement}>-</button>
<div>
{this.state.count}
</div>
</div>
);
}
}
ReactDOM.render(<Counter />, document.getElementById('countContainer'));
just define the functions and trigger them using onClick().
Here is the working counter in codepen with your code, modified it a bit to make it work. https://codepen.io/coderakki/pen/QOQqMP?editors=0010
Update : also, you need to define count within the state of your component .

How do I get the dom node of a child element in a component without adding logic to its parent/children?

In the following example WrapperComp needs to get access to the dom node of the divs in line 5 and line 8, without adding logic to PageComp or ItemComp. The only things I could change in PageComp are the div tags. E.g. I could add a ref, prop, data-attribute, etc to them.
The divs don't have to be created inside PageComp. WrapperComp would be allowed to create them too, but they must wrap each of its children (In this case each ItemComp).
Example
class PageComp extends React.Component {
render() {
return (
<WrapperComp>
<div>
<ItemComp/>
</div>
<div>
<ItemComp/>
</div>
</WrapperComp>
);
}
}
class WrapperComp extends React.Component {
render() {
return (
<div>
<h1>A wrapper</h1>
{this.props.children}
</div>
);
}
}
class ItemComp extends React.Component {
render() {
return (
<div>
<h1>An item</h1>
</div>
);
}
}
ReactDOM.render(
<PageComp/>,
document.getElementById('app')
);
JSBIN
What I tried so far:
I already tried to put a ref= on the divs, but that ref would only be available in PageComp not in WrapperComp.
I also tried to create the divs inside WrapperComp and put a ref= on them from there, but that would result in a Refs Must Have Owner Warning
Now I wonder.. what would be an appropriate way in react to solve that problem?
Till now the only solution that came to my mind was to put a data-attribute on each div and search the dom for them after componentDidMount like that: document.querySelectorAll('[data-xxx]'). Perhaps I'm not sure if this is how you do it in react..
Why do I want to get the node inside WrapperComp?
I want to create a component that adjusts the dimensions of its children. In the example that component would be WrapperComp. The adjustments can only be done after the children rendered to the dom, e.g. to get clientHeight.

If you don't restrict that this needs to be solved by how one should get the DOM, pass them down, etc, I would get rid of the puzzle and approach it in a different direction.
Since you are not given much control to <PageComp> whereas <WrapperComp> seems flexible, I would do the wrapping in the later by transforming the passed children to what you need them to be.
class PageComp extends React.Component {
render() {
return (
<WrapperComp>
<ItemComp/>
<ItemComp/>
</WrapperComp>
);
}
}
class WrapperComp extends React.Component {
render() {
const wrappedChldren = React.Children.map(this.props.children, function(child) {
return (
<div ref={function(div) {
this.setState{clientHeight: div.clientHeight}
}}>
<h1>A wrapper</h1>
{ child }
</div>
);
});
return <div>{ wrappedChildren }</div>;
}
}
With this concentrate can be put on the transformation in the <WrapperComp>, which is pretty intuitive as its name suggests.