We Keep Coding

React toggle class on just one component

I'm creating, in componentDidMount, a lots of <div>'s.
constructor (props) {
super(props)
this.state = {
componentLoaded: false,
divs: []
}
}
componentDidMount () {
this.createDivs()
}
createDivs () {
// Actually, this divs are created dinamically and with infinite scroll
let divs = <div className='container'>
<div className='item' onClick={() => { /* Add class */ }}>...</div>
<div className='item' onClick={() => { /* Add class */ }}>...</div>
<div className='item' onClick={() => { /* Add class */ }}>...</div>
/* ... n divs ... */
</div>
let newDivs = this.state.divs
newDivs.push(divs)
this.setState({
componentLoaded: true,
divs: newDivs
})
}
render () {
return {this.state.componentLoaded ? this.state.divs : null }
/* In my return, if X event occurs, re-call this.createDivs() to add more divs */
}
What I'm trying to achieve, is to toggle a class into only one of the .item divs, and then if clicking another one, remove it from the before and add it to the one was clicked.
I've tried to add an attribute to the state, but it didn't add it. I also searched for some solutions, but I always find solutions which doesn't toggle, as they are "toggled individually" in separated components.
Hoping to find some help, maybe this thing is real simple, but for now, I cannot figure out how to make it.
PS: I'm adding the createDivs into the state because it's an infinite scroll that re-uses the function, so I just push them into the state and the scroll won't go to the top again when adding the previous ones + the new ones.

In problems like these it is always helpful to determine what goes into react's state. You want the state to be as lightweight as possible (so you store only the stuff which is necessary)
class Test extends React.Component {
state = {
selectedDiv: null,
};
handleClick = id => {
this.setState(prev => ({
// sets it to null if its already active else, sets it active
selectedDiv: prev.selectedDiv === id ? null : id,
}));
};
render() {
// Array to map over
const divs = [1, 2, 3, 4];
const { selectedDiv } = this.state;
return (
<div className="container">
{divs.map(div => {
return (
<div
key={div}
className={selectedDiv === div ? "item class_to_add" : "item"}
onClick={() => this.handleClick(div)}
>Item {div}</div>
);
})}
</div>
);
}
}
In the above examples we are only storing the unique Id of the div in the state and using that to determine if the selected div is active or not, if it is then we simply remove it from the state. The above solution does not require any complex lifecycle methods, my advice would be to keep the component as simple as possible.
PS. not part of the answer but I suggest you to look into the newer hooks API its more intuitive and most probably the future of react

First, note that you're breaking a React rule here:
this.state.divs.push(divs)
You must never directly modify state. The correct thing there is either:
this.setState({divs}); // Replaces any previous ones
or
this.setState(({divs: oldDivs}) => {divs: [...oldDivs, divs]}); // Adds to any previous ones
However, the "React way" to do this would probably be not to store those divs in state at all; instead, store the information related to them in state, and render them (in render) as needed, with the appropriate classes. The information about which one of them has the class would typically either be information on the items themselves, or some identifying information about the item (such as an id of some kind) held in your component's state.
Here's an example using items that have an id:
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
// No items yet
items: null,
// No selected item yet
selectedId: null
};
}
componentDidMount() {
this.createDivs();
}
createDivs() {
// Simulate ajax or whatever
setTimeout(() => {
const items = [
{id: 42, label: "First item"},
{id: 12, label: "Second item"},
{id: 475, label: "third item"},
];
this.setState({items});
}, 800);
}
render () {
const {items, selectedId} = this.state;
if (!items) {
// Not loaded yet
return null;
}
return (
<div className='container'>
{items.map(({id, label}) => (
<div
key={id}
className={`item ${id === selectedId ? "selected" : ""}`}
onClick={() => this.setState({selectedId: id})}
>
{label}
</div>
))}
</div>
);
}
}
ReactDOM.render(<Example />, document.getElementById("root"));
.selected {
color: green;
}
.item {
cursor: pointer;
}
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js"></script>

React refs in memory game

Hi I'm a beginner in ReactJS and I'm making a memory game with it and have problems with revealing tiles.
I wanted to have a few values in parent component's state, like firstPick, secondPick, pickCount and also isHidden (this toggles icon visibility).
But putting it in parent component makes click on any button toggle icon on every tile. To solve this, I moved isHidden property to Button (child) component. Now i wanted to manipulate state of Button from its parent component, so I found information about using refs somewhere in the internet. But using them makes clicking every button only toggle the last button in the container. I suppose i messed up something.
So my Button components looks like this:
class Button extends Component {
state = {isHidden: true};
toggleHidden () {
this.setState({isHidden: !this.state.isHidden});
}
render() {
return (
<div>
<button className="tile" onClick={this.props.onClick}>
<i
className={this.props.icon}
style={
this.state.isHidden ? { display: "none" } : { display: "block" }
}
/>
</button>
</div>
);
}
}
and my Board components looks like this:
class Board extends Component {
state = { firstPick: "", secondPick: "", pickCount: 0 };
constructor(props) {
super(props);
this.buttonElement = React.createRef();
}
handleClick = () => {
this.buttonElement.current.toggleHidden();
this.setState({
firstPick: this.icon,
pickCount: this.state.pickCount + 1
});
alert(this.state.firstPick);
};
render() {
return (
<div className="board">
<div className="container">
<div className="row align-items-start">
<div className="col-3">
<Button
ref={this.buttonElement}
icon={animalArray[0]}
onClick={this.handleClick}
/>
Of course there are 11 other Button components here, but they look just the same. (Btw is there a way to not repeat this code? They are placed in bootstrap container).
I also have 1 bonus question. Is there a way to set the state.firstPick to the icon property? I don't know how to refer to this value from the Parent component method. I tried writing this.icon, but i don't think it works. I wanted to keep two choices in state variables and then compare them. Or is there maybe a better way to solve this problem? Thanks

Why not just handle the toggle in the button itself?
class Button extends Component {
state = {isHidden: true};
toggleHidden () {
this.setState({isHidden: !this.state.isHidden});
}
onClick = () => {
this.toggleHidden();
if (this.props.onClick) {
this.props.onClick();
}
}
render() {
return (
<div>
<button className="tile" onClick={this.onClick}>
<i
className={this.props.icon}
style={
this.state.isHidden ? { display: "none" } : { display: "block" }
}
/>
</button>
</div>
);
}
}
Update: To preserve unique reference for firstPick, you can wrap your handleClick in another function:
handleClick = (icon) => () => {
this.buttonElement.current.toggleHidden();
this.setState({
firstPick: icon,
pickCount: this.state.pickCount + 1
});
alert(this.state.firstPick);
};
render() {
return (
<div className="board">
<div className="container">
<div className="row align-items-start">
<div className="col-3">
<Button
ref={this.buttonElement}
icon={animalArray[0]}
onClick={this.handleClick(animalArray[0])}
/>
handleClick now becomes a function that returns your original function (with some extra/unique context, in this case animalArray[0]).

I would say the complexity of your project is enough to warrant a store like flux or redux to keep track of all your button properties. This is generally the solution to complex relationships between parent and child elements.
In my opinion, refs should only be used for uncontrolled components, that is, any elements on your page that are not in react.

ComponentDidUpdate doesn't work

I'm trying to render dynamically a collection of component using componentDidUpdate.
This is my scenario:
var index = 0;
class myComponent extends Component {
constructor(props) {
super(props);
this.state = {
componentList: [<ComponentToRender key={index} id={index} />]
};
this.addPeriodHandler = this.addPeriodHandler.bind(this);
}
componentDidUpdate = () => {
var container = document.getElementById("container");
this.state.componentList.length !== 0
? ReactDOM.render(this.state.componentList, container)
: ReactDOM.unmountComponentAtNode(container);
};
addHandler = () => {
var array = this.state.componentList;
index++;
array.push(<ComponentToRender key={index} id={index} />);
this.setState = {
componentList: array
};
};
render() {
return (
<div id="Wrapper">
<button id="addPeriod" onClick={this.addHandler}>
Add Component
</button>
<div id="container" />
</div>
);
}
}
The problem is that componentDidUpdate work only one time, but it should work every time that component's state change.
Thank you in advance.

This is not how to use react. With ReactDOM.render() you are creating an entirely new component tree. Usually you only do that once to initially render your app. Everything else will be rendered by the render() functions of your components. If you do it with ReactDOM.render() you are basically throwing away everything react has already rendered every time you update your data and recreate it from scratch when in reality you may only need to add a single node somewhere.
Also what you actually store in the component state should be plain data and not components. Then use this data to render your components in the render() function.
Example for a valid use case:
class MyComponent extends Component{
state = {
periods: []
};
handleAddPeriod = () => {
this.setState(oldState => ({
periods: [
...oldState.periods,
{/*new period data here*/}
],
});
};
render() {
return (
<div id="Wrapper">
<button id="addPeriod" onClick={this.handleAddPeriod}>
Add Component
</button>
<div id="container">
{periods.map((period, index) => (
<ComponentToRender id={index} key={index}>
{/* render period data here */}
</ComponentToRender>
))}
</div>
</div>
);
}
}
}
Also you should not work with global variables like you did with index. If you have data that changes during using your application this is an indicator that is should be component state.

try
addHandler = () =>{
var array = this.state.componentList.slice();
index++;
array.push(<ComponentToRender key={index} id={index}/>);
this.setState=({
componentList: array
});
}
if that works, this is an issue with the state holding an Array reference that isn't changing. When you're calling setState even though you've added to the Array, it still sees the same reference because push doesn't create a new Array. You might be able to get by using the same array if you also implement shouldComponentUpdate and check the array length of the new state in there to see if it's changed.

Pass the current state of parent component to children through props

I have a very event-driven component. In this case, it is a video tag which will update its state with the current state of the playing video. For the sake of simplicity, imagine it looks something like this:
export default class VideoPlayer extends Component {
state = {
canPlay: false,
duration: 0,
position: 0,
};
onCanPlay = () => this.setState({ canPlay: true });
onTimeUpdate = ({ target: { position, duration } }) => this.setState({ position, duration });
render() {
const { src, children } = this.props;
return (
<div className={styles.container}>
<video
src={src}
onCanPlay={this.onCanPlay}
onTimeUpdate={this.onTimeUpdate}
/>
{children}
</div>
);
}
}
In this case, I want to pass the entire state of the component to the child. One way I can do it, which feels somewhat convuluted, is to pass a function as children which injects the state and returns a component. For example:
{children(this.state)}
Where the passed in component would be like:
{(state) => <Progress {...state} />}
But I feel like there must be a way to pass the state of the parent component implicitly as props. How would this be done with React?

Maybe you can try with:
<div>
{ React.Children.map(this.props.children,
child => React.cloneElement(child, {...this.state})
)}
</div>

Focusing div elements with React

Is it possible to focus div (or any other elements) using the focus() method?
I've set a tabIndex to a div element:
<div ref="dropdown" tabIndex="1"></div>
And I can see it gets focused when I click on it, however, I'm trying to dynamically focus the element like this:
setActive(state) {
ReactDOM.findDOMNode(this.refs.dropdown).focus();
}
Or like this:
this.refs.dropdown.focus();
But the component doesn't get focus when the event is triggered. How can I do this? Is there any other (not input) element I can use for this?
EDIT:
Well, It seems this it actually possible to do: https://jsfiddle.net/69z2wepo/54201/
But it is not working for me, this is my full code:
class ColorPicker extends React.Component {
constructor(props) {
super(props);
this.state = {
active: false,
value: ""
};
}
selectItem(color) {
this.setState({ value: color, active: false });
}
setActive(state) {
this.setState({ active: state });
this.refs.dropdown.focus();
}
render() {
const { colors, styles, inputName } = this.props;
const pickerClasses = classNames('colorpicker-dropdown', { 'active': this.state.active });
const colorFields = colors.map((color, index) => {
const colorClasses = classNames('colorpicker-item', [`colorpicker-item-${color}`]);
return (
<div onClick={() => { this.selectItem(color) }} key={index} className="colorpicker-item-container">
<div className={colorClasses}></div>
</div>
);
});
return (
<div className="colorpicker">
<input type="text" className={styles} name={inputName} ref="component" value={this.state.value} onFocus={() => { this.setActive(true) }} />
<div onBlur={() => this.setActive(false) } onFocus={() => console.log('focus')} tabIndex="1" ref="dropdown" className={pickerClasses}>
{colorFields}
</div>
</div>
);
}
}

React redraws the component every time you set the state, meaning that the component loses focus. In this kind of instances it is convenient to use the componentDidUpdate or componentDidMount methods if you want to focus the element based on a prop, or state element.
Keep in mind that as per React Lifecycle documentation, componentDidMount will only happen after rendering the component for the first time on the screen, and in this call componentDidUpdate will not occur, then for each new setState, forceUpdate call or the component receiving new props the componentDidUpdate call will occur.
componentDidMount() {
this.focusDiv();
},
componentDidUpdate() {
if(this.state.active)
this.focusDiv();
},
focusDiv() {
ReactDOM.findDOMNode(this.refs.theDiv).focus();
}
Here is a JS fiddle you can play around with.

This is the problem:
this.setState({ active: state });
this.refs.component.focus();
Set state is rerendering your component and the call is asynchronous, so you are focusing, it's just immediately rerendering after it focuses and you lose focus. Try using the setState callback
this.setState({ active: state }, () => {
this.refs.component.focus();
});

A little late to answer but the reason why your event handler is not working is probably because you are not binding your functions and so 'this' used inside the function would be undefined when you pass it as eg: "this.selectItem(color)"
In the constructor do:
this.selectItem = this.selectItem.bind(this)
this.setActive = this.setActive.bind(this)

This worked in my case
render: function(){
if(this.props.edit){
setTimeout(()=>{ this.divElement.focus() },0)
}
return <div ref={ divElement => this.divElement = divElement}
contentEditable={props.edit}/>
}