How to re-render child component In this situation?

Question

Problem

If I click a number, the number should increase but not increase.

As you can see, child components are not re-rendered. (If I change the key of the 'li' element to Math.random() it works fine.)

How can I solve this situation?

An example was posted on https://codesandbox.io/s/p5q30rxk47

Thanks for reading.

Source code

The source code is roughly as follows.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Parent from './Parent';

import { createStore } from 'redux';
import { Provider } from 'react-redux';
import reducer from './redux';

const body = document.querySelector('body'),
      store = createStore(reducer);

ReactDOM.render(<Provider store={store}><Parent/></Provider>, body);

Parent.js

import React from 'react';
import { connect } from 'react-redux';
import Child from './Child';

class Parent extends React.PureComponent {
    get_numbers () {
        return this.props.numbers.map((number) => (
            <li key={number.id}>
                <span>number : </span><br/>
                <Child number={number} />
            </li>
        ));
    }

    render () {
        return (
            <ul>
                {this.get_numbers()}
            </ul>
        );
    }
}


function mapStateToProps(state) {
    return { numbers: state.numbers };
}

Parent = connect(mapStateToProps)(Parent);

export default Parent;

Child.js

import React from 'react';
import { connect } from 'react-redux';
import { increase_number } from './redux';

class Child extends React.PureComponent {
    render() {
        return (
            <span onClick={() => this.props.increase_number(this.props.number)}>{this.props.number.value}</span>
        );
    }
}

function mapDispatchToProps(dispatch) {
    return {
        increase_number: (number) => dispatch(increase_number({ number }))
    };
}

Child = connect(undefined, mapDispatchToProps)(Child);

export default Child;

redux.js

import { createAction, handleActions } from 'redux-actions';

export const increase_number = createAction('increase_number');

const initial_state = {
    numbers: [
        { id: 1, value: 1 },
        { id: 2, value: 2 },
        { id: 3, value: 3 }
    ]
};

export default handleActions({
    increase_number: (state, action) => {
        // console.log(action.payload.number.value);
        action.payload.number.value++;
        // console.log(action.payload.number.value);
        return { ...state, numbers: [...state.numbers] }
    }
}, initial_state);

@Sajith Dilshan I don't know if I understood your question correctly.. I want each number to increase by clicking on each element. — left click, Dec 30 '17 at 14:57

Shruti Singh · Answer 1 · 2017-12-30T20:38:45.470

This is because keys helps you to figure if that element has changed when it gets compared in the virtual Dom, so if the id is same for the elements, ie : 1 for first li, 2 for second li, the dom will never know since the element updates based on change in virtual dom , even though the values are changing possible solution could be to use id's different from 1, 2, 3 and update the id along with the value so that the Dom is able to figure out the change.

one Possible hack could be

increase_number: (state, action) => {
         //console.log(action.payload.number.value);
        action.payload.number.value++;
        action.payload.number.id--;
        //console.log(action.payload.number.value);
        return { ...state, numbers: [...state.numbers] }
    }

now the key will update everytime with the value but should not increase since it will be same key of the 2nd li and the dom will give you an error so everytime 1 goes to 2 its id will go -- ie 1-1 =0

here is the working Sample
https://codesandbox.io/s/mz6zy5rq28

Thank you so much. :) Currently, I was also using a similar approach because of the burden of re-rendering all child components and making deep copies. However, if the

margaretkru · Accepted Answer · 2017-12-30T15:20:22.863

2

You need to get a deep copy of numbers array and then increase the value of the number that is passed in payload, like this:

export default handleActions({
  increase_number: (state, action) => {
      let numberToModify = action.payload.number;

      // make a new array with new objects
      let newNumbers = state.numbers.map(n => ({ id: n.id, value: n.value }));

      // find the one that needs to be modified
      let existingNumber = newNumbers.find((number) => (number.id === numberToModify.id));
      if (existingNumber) {
        existingNumber.value++;
      }

      return { ...state, numbers: newNumbers };
  }
}, initial_state);

Made a working example here.

edited Dec 30 '17 at 15:20

answered Dec 30 '17 at 15:07

margaretkru

2,751
18
20

Thank you a lot. Do you happen to know anything other than deep copying? This is because the objects in the actual source code have a lot of depth and length. – left click Dec 30 '17 at 15:37
No probs. I am not sure if there is another way... you can take a look at this [SO question](https://stackoverflow.com/questions/37980109/react-redux-complex-deep-state-objects) about how to work with complex (deep) state objects, maybe there is smth useful there. But if you still go with deep copying, you can make smth like `state.arrayOfComplexObjects.map(obj => ({ ...obj }));` to avoid manual copying. – margaretkru Dec 30 '17 at 15:46
Okay, Thanks. :) – left click Dec 30 '17 at 15:50

Sajith Edirisinghe · Answer 3 · 2017-12-30T15:20:20.040

You need to modify the handleAction as below

export default handleActions({
increase_number: (state, action) => {
   action.payload.number.value++
   const currentNum = action.payload.number;

   let newLst = state.numbers.map((num) => {
     return num.id === currentNum.id ? {...action.payload.number} : num
    })

    return { ...state, numbers: newLst }
  }
}, initial_state);

Here is the working sample https://codesandbox.io/s/4jor55xz5w

score 1 · Answer 4 · answered Dec 30 '17 at 15:37

Slightly modified you handleActions

export default handleActions({
    increase_number: (state, action) => {
      action.payload.number.value++;

      const currNumber = action.payload.number;

      const numbers = state.numbers.map((num) => {
        return num.id === currNumber.id ? { ...action.payload.number } : num
      });

      return { ...state, numbers }
    }
}, initial_state);

score 0 · Answer 5 · answered Dec 30 '17 at 15:02

For increasing the value by one you should make changes in your redux.js file like below:

import { createAction, handleActions } from 'redux-actions';

export const increase_number = createAction('increase_number');

const initial_state = {
    numbers: [
        { id: 1, value: 1 },
        { id: 2, value: 2 },
        { id: 3, value: 3 }
    ]
};

export default handleActions({
    increase_number: (state, action) => {
        console.log(action.payload.number.value);
        // action.payload.numbers.value++;
        const numbers = [...state.numbers];
        numbers.push({
          id: action.payload.number.value++,
          value: action.payload.number.value++
        })
        // console.log(action.payload.number.value);
        return { ...state, numbers: numbers }
    }
}, initial_state);`

`numbers.push({ ... })` will add more items to the array, which is not the original idea. The target number passed in `action` should have its value increased. — margaretkru, Dec 30 '17 at 17:08

How to re-render child component In this situation?

Problem

Source code

5 Answers5