We Keep Coding

Regarding LifeCycles in ReactJS / Problem in the code snippet

I'm trying to learn ReactJS and found out about these lifecycles. However I've a doubt regarding how componentDidUpdate() functions and I want to know the reason behind it. Please take a look at the code below. It is a simple code that calculates the area of a triangle. Just to understand how we can send data from parent to child and vice versa I'm initialising the variables in parent component, then passing them to child to calculate the area and then passing back the results to change the state to final one where the results are rendered.
App.js
class App extends React.Component{
constructor(props){
super(props);
console.log("In the parent's constructor");
let initializeState=[{'base' : 0,'height' : 0,'area' : 0}];
this.state={ values : initializeState }
console.log(this.state.values);
}
componentDidMount(){
console.log("Mounting values");
let b = [{}];
b['base']=10;
b['height']=20;
b['area']=0;
this.setState({values: b});
}
update = (base,height,area) => {
console.log("Updating state with calculated area");
let updatedValue = [{}];
updatedValue['base'] = base;
updatedValue['height'] = height;
updatedValue['area'] = area;
this.setState({values: updatedValue});
}
render(){
console.log('Inside Parent render');
return(<React.Fragment>
<Triangle val = {this.state.values} update={this.update} />
</React.Fragment>
)
}
}
class Triangle extends React.Component{
shouldComponentUpdate(newProps, newState){
console.log('validating data');
if(newProps.val.base >0 && newProps.val.height >0){
return true;
}else{
return false;
}
}
componentDidUpdate(prevProps, prevState, snapshot){
console.log('In the child componentDidUpdate');
console.log('If you\'ve reached this, state has been re-rendered')
console.log(prevProps.val.base);
console.log(prevProps.val.height);
console.log(prevProps.val.area);
}
calcArea = () => {
console.log('Calculating area now');
let area = 1/2* this.props.val.base * this.props.val.height;
this.props.update(this.props.val.base,this.props.val.height,area);
}
render(){
console.log("In the child's render method")
return(
<React.Fragment>
<h2>Base : {this.props.val.base}</h2>
<h2>Height : {this.props.val.height}</h2>
<h2>Area : {this.props.val.area} </h2>
<button onClick={this.calcArea}>Click to calculate AREA</button>
</React.Fragment>
)
}
}
export default App;
So Everything is working fine, i.e., This is the series of output:
In the parent's constructor
App.js:11 [{…}]
App.js:33 Inside Parent render
App.js:66 In the child's render method
App.js:15 Mounting values
App.js:33 Inside Parent render
App.js:43 validating data
App.js:66 In the child's render method
App.js:52 In the child componentDidUpdate
App.js:53 If you've reached this, state has been re-rendered
Now till this point, the component has re-rendered according to the new values mentioned inside componentDidMount function. However the next output is :
App.js:54 undefined
App.js:55 undefined
App.js:56 undefined
It should be the values that have been destroyed. ie., 0, 0, 0 (mentioned inside the parent's constructor using this.state ). Though when I hit the calculate Area and the component is re-rendered, it shows the correct values which have been destroyed. ie.,
Calculating area now
App.js:24 Updating state with calculated area
App.js:33 Inside Parent render
App.js:43 validating data
App.js:66 In the child's render method
App.js:52 In the child componentDidUpdate
App.js:53 If you've reached this, state has been re-rendered
App.js:54 10
App.js:55 20
App.js:56 0
Can someone tell me why the results are "undefined" when the state is being changed for the first time and not the values that we have instantiated ??

There are some issues in the JavaScript which are probably the reason why you are getting undefined values.
let initializeState=[{'base' : 0,'height' : 0,'area' : 0}];
this.state={ values : initializeState }
Here you are setting the state as an object with a key values which then holds an array of objects [{}].
This leads to issues in other places where an array of objects is defined but then it is accessed like an object:
let b = [{}];
b['base']=10;
This code should be:
let b = {};
b.base = 10;
There is no need to use bracket notation when you are using a "normal" string as the key. This notation is used when using variables for the key or string keys that start with a number, have hyphens, etc:
const a_string = 'base';
const a_string_with_hyphen = 'some-key-name';
an_object[a_string] = 123;
an_object[a_string_with_hyphen] = 456;
Use let when defining a variable which value will change, otherwise use a const:
let value_that_will_change = 123;
const value_that_wont_change = 456;
value_that_will_change = 789;
Regarding react specifically, I changed the code a little to show different approaches, so that you can see how the state is changing. I used inputs to modify the values, that I think can be handy in this case:
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = { base: 0, height: 0, area: 0 };
console.log("App. constructor.", "state:", this.state);
}
componentDidMount() {
const values = {
base: 10,
height: 20,
area: 200
};
this.setState(values);
console.log(
"App. componentDidMount.",
"state:",
this.state,
"Updating state with new values:",
values
);
}
componentDidUpdate(prevProps, prevState) {
console.log(
"App. componentDidUpdate.",
"prev state:",
prevState,
"new state:",
this.state
);
}
updateBase = base_new => {
this.setState({
base: base_new,
area: (1 / 2) * base_new * this.state.height
});
console.log("App. updateBase.", "new base:", base_new);
};
updateHeight = event => {
const height_new = parseInt(event.target.value);
this.setState({
height: height_new,
area: (1 / 2) * height_new * this.state.base
});
console.log("App. updateHeight.", "new height:", height_new);
};
doubleBase = () => {
const { base, height } = this.state;
const base_new = 2 * base;
const area_new = (1 / 2) * base_new * height;
this.setState({ base: base_new, area: area_new });
console.log("App. doubleBase.", "new area:", area_new);
};
render() {
const { state, updateBase, updateHeight, doubleBase } = this;
console.log("App. render.", "state:", this.state);
return (
<Triangle
{...state}
updateBase={updateBase}
updateHeight={updateHeight}
doubleBase={doubleBase}
/>
);
}
}
class Triangle extends React.Component {
componentDidMount() {
const {
updateBase,
updateHeight,
doubleBase,
...parent_state_props
} = this.props;
console.log("Triangle. componentDidMount.", "props:", parent_state_props);
}
componentDidUpdate(prevProps) {
const {
updateBase,
updateHeight,
doubleBase,
...parent_state_props
} = this.props;
const {
updateBase: updateBase_prev,
updateHeight: updateHeight_prev,
doubleBase: doubleBase_prev,
...parent_state_props_prev
} = prevProps;
console.log(
"Triangle. componentDidUpdate.",
"prev props:",
parent_state_props_prev,
"new props:",
parent_state_props
);
}
render() {
const {
updateBase,
updateHeight,
doubleBase,
...parent_state_props
} = this.props;
const { base, height, area } = parent_state_props;
console.log("Triangle. render.", "props:", parent_state_props);
return (
<React.Fragment>
<label for="base" style={{ display: "block" }}>
Base
</label>
<input
id="base"
type="number"
value={base}
// Here we are defining the function directly and sending the value.
onChange={event => updateBase(parseInt(event.target.value))}
/>
<label for="height" style={{ display: "block" }}>
Height
</label>
<input
id="height"
type="number"
value={height}
// Here we are sending the event to the function.
onChange={updateHeight}
/>
<h2>{`Area: ${area}`}</h2>
<button onClick={doubleBase}>Double base</button>
</React.Fragment>
);
}
}
In the above code I left shouldComponentUpdate out. This method is used to prevent the Component from rendering. The reason for this is that every time a parent Component renders, it will make all its children render. This is ok if the props that the children receives changed, but not necessary when those received props didn't change. Basically nothing changed in the children but it is still rendering. If this supposes a performance issue you can use the PureComponent instead of Component, or use your own logic in shouldComponentUpdate.
One last thing, if you accept the advice, I encourage you to learn React Hooks which were introduced this year and is the new way to build with React.
Let me know if something is not clear or I missed something.

On componentDidMount in App component, we are setting the new values ,
previously they were undefined.
Now, inside componentDidUpdate in Triangle component, you are logging the prevProps which were never there, as a result they are undefined.
componentDidUpdate(prevProps, prevState, snapshot){
console.log('In the child componentDidUpdate');
console.log('If you\'ve reached this, state has been re-rendered')
console.log(prevProps.val.base);
console.log(prevProps.val.height);
console.log(prevProps.val.area);
console.log(this.props.val.base);
console.log(this.props.val.height);
console.log(this.props.val.area);
}
Change as above, you will get to know that the new props are set.

Component Doesn't Update once the Parent component's state is updated

import React, {Component} from 'react';
import "./DisplayCard.css";
class DisplayCard extends Component {
runArray = (array) => {
for (var i = 0; i<array.length; i++) {
return <div>{array[i].task}</div>
}
}
renderElements = (savedTasks) =>{
if (savedTasks.length === 0) {
return <div className="noTasks"> <p>You have no saved tasks.</p> </div>
} else {
return this.runArray(savedTasks)
}
}
render() {
return (
<div className="DisplayCardContainer">
{this.renderElements(this.props.saved)}
</div>
)
}
}
export default DisplayCard;
Hey guys,
I am new to react, so this is my child component that takes state from its parent component. My goal is to re-render component every time the array this.props.saved is changed.
This component renders: <p>You have no saved tasks.</p> when the this.props.saved.length === 0 and it renders <div>{array[0].task}</div> when i enter the first task, but it keeps it at <div>{array[0].task}</div> after that. I do see that the state keeps changing and this.props.saved keeps getting bigger, but my component doesn't change anymore.

Here's your problem:
runArray = (array) => {
for (var i = 0; i<array.length; i++) {
//the first time we get here, it immediately ends the function!
return <div>{array[i].task}</div>
}
}
This loop only ever goes through once (at i=0) and then returns, exiting the runArray function and cancelling the rest of the loop. You probably wanted to return an array of elements, one for each of the tasks. I recommend using Array.map() for this, which takes an array and transforms each element, creating a new array:
runArray = (array) => {
return array.map(arrayElement => <div>arrayElement.task</div>);
}
This should do the trick. Note that React may complain about the fact that your elements lack the key property - see the documentation for more info: https://reactjs.org/docs/lists-and-keys.html

The problem is in your runArray function. Inside your loop, you are returning the first element and that's it. My guess is, you see only the first entry?
When you are trying to render all your tasks, I would suggest to map your tasks, e.g.
runArray = (array) => array.map(entry => <div>{entry.task}</div>)

It is because you write wrong the runArray function. You make a return in the for loop so it breaks after the first iteration. It will not iterate over the full array.
You need to transform your for loop to a map : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
runArray = (array) => {
return array.map(v => <div>{v.task}</div>)
}
Does it fix your issue ?

You have to update state of the component to trigger render function. Your render function is not triggered because you did not update the state when the props changed. There are many ways to update state when props updated. One method may be the following:
componentWillReceiveProps(nextProps){
if (nextProps.saved !== this.props.saved) {
this.setState({ saved: nextProps.saved })
}
}
Also change yoour render function to use state of the component as below:
renderElements = () =>{
if (this.state.savedTasks.length === 0) {
return <div className="noTasks"> <p>You have no saved tasks.</p> </div>
} else {
return this.runArray(this.state.savedTasks)
}
}

Use .map so that it renders your task correctly. You can remove runArray and rely entirely on props so you don't need to pass arguments across functions as it can get messy quickly. Here's a quick running example of how to create a parent component where you can add a task and pass them into a component so that it renders your data when props are changed, therefore making it reactive.
class App extends React.Component {
state = {
taskLabel: "",
tasks: [
{
id: 1,
label: "Do something"
},
{
id: 2,
label: "Learn sometihng"
}
]
};
handleInput = evt => {
this.setState({
[evt.target.name]: evt.target.value
});
};
handleSubmit = evt => {
evt.preventDefault();
this.setState(prevState => ({
taskLabel: "",
tasks: [
...prevState.tasks,
{
id: prevState.tasks.length + 1,
label: this.state.taskLabel
}
]
}));
};
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<input
name="taskLabel"
type="text"
placeholder="Task label"
value={this.state.taskLabel}
onChange={this.handleInput}
/>
<button>Create task</button>
</form>
<DisplayCard tasks={this.state.tasks} />
</div>
);
}
}
class DisplayCard extends React.Component {
renderTasks = () => {
if (this.props.tasks.length !== 0) {
return this.props.tasks.map(task => (
<div key={task.id}>{task.label}</div>
));
} else {
return <div>No tasks</div>;
}
};
render() {
return <div>{this.renderTasks()}</div>;
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Call another code while array.map() is running

I have the following react code:
{myArray.map(arr => {
return ( <MyComponent title={arr.ttile} /> )
})}
I would like to call a Loading component while the map() is not completely finished. Is it possible to do that? If yes, how would I do that?

If you are getting your data from an API, you might want to render the data as usual, but you can get the data in the componentDidMount hook instead, and e.g. keep an additional piece of state isLoading which you can use in the render method to decide if you should show a loading component.
Example
function getBooks() {
return new Promise(resolve => {
setTimeout(() => resolve([{ title: "foo" }, { title: "bar" }]), 1000);
});
}
function MyComponent(props) {
return <div> {props.title} </div>;
}
class App extends React.Component {
state = { books: [], isLoading: true };
componentDidMount() {
getBooks().then(books => {
this.setState({ books, isLoading: false });
});
}
render() {
const { isLoading, books } = this.state;
if (isLoading) {
return <div> Loading... </div>;
}
return (
<div>
{this.state.books.map(book => <MyComponent title={book.title} />)}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

If you want to actually be able to see the components being loaded behind/under the loading indicator, then it would be more challenging and would probably need more work than this proposed solution. But if you just want a loading indicator to show while the .map() prototype function is working, I believe this would do the trick:
constructor(props) {
super(props);
this.state = { loadingIndicator : null };
}
getArrayOfMyComponents() {
return myArray.map((arr, index) => {
if (index === 0) {
const loadingIndicator = <Loading/>;
this.setState({ loadingIndicator : loadingIndicator });
} else if (index === myArray.length - 1) {
this.setState({ loadingIndicator : null });
}
return ( <MyComponent title={arr.title} /> );
});
}
render() {
const arrayOfMyComponents = this.getArrayOfMyComponents();
return (
<div>
{this.state.loadingIndicator}
{arrayOfMyComponents}
</div>
);
}
Array.prototype.map() is really just a fancier version of Array.prototype.forEach(). So we can leverage that fact to launch the display of the loading indicator on the first iteration and remove it on the last.

you can have a boolean in a state, and just before you start array map put boolean true and run another code o component render, and then when array maps end you put that state to false, for redux im using state fetch start, fetching, fetched, and then you can take the control of situation

Can't access refs to call a method from a different component

I'm new to React-Native and I've been trying to call a method from another component, but I can't seem to access refs properly. Here's how my render method looks like
<Content contentContainerStyle={styles.content}>
...
<PostComponent style={styles.cardStyle} ref="cardRef" />
<View style={styles.horizontalTextContainer}>
<this.refs.cardRef.getText />
</View>
...
</Content>
In the PostComponent component, here's the method that I'm trying to call:
getText() {
return (
<Text>Hello</Text>
);
}
In the same component's constructor, I can use refs just fine to call a method like so:
constructor(props) {
super(props);
newthis = this
this.state = {
time: 20,
cards: [],
}
var timer = setInterval(() => {
this.setState({
time: --this.state.time,
})
if(this.state.time == 0) {
this.setState({
time: 20,
})
this.refs.cardRef.timesUp();
}
}, 1000);
}
Strangely, the ref works inside the setInverval method but not right outside it - how is the scope even working here? Also, if you notice I have a hacky "newthis" to save the global this - because in some methods of the component I can't access "this" (it's undefined).

In the constructor, when the call is made the component is still not mounted. refs can be safely accessed only after componentDidMount lifecycle method. Also string type refs are deprecated https://facebook.github.io/react/docs/refs-and-the-dom.html . Please use callback function syntax.
In your case, the refs are probably working in setInterval due to the time interval. The component would have mounted by 1000ms.
And to avoid hacky newThis, you can use arrow functions or bind this in the constructor. Most callback functions of the components have their own this context.
constructor(props) {
super(props);
newthis = this
this.state = {
time: 20,
cards: [],
}
}
componentDidMount() {
this.timer = setInterval(() => {
this.setState({
time: --this.state.time,
})
if(this.state.time == 0) {
this.setState({
time: 20,
})
this.cardRef.timesUp();
}
}, 1000);
}
componentWillUnmount() {
clearInterval(this.timer)
}
...
<Content contentContainerStyle={styles.content}>
...
<PostComponent style={styles.cardStyle} ref={(ref) => this.cardRef = ref} />
<View style={styles.horizontalTextContainer}>
{this.cardRef.getText()}
</View>
...
</Content>

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}/>
}