Nested map is not rendering the Redux State Correctly

Question

I am new to react js. I am creating a comparison between user typing and actual sentence to be typed Somehow I am able to achieve this but It is not perfect like nested map is not rendering properly if letter typed correctly it should render green background My state is updated properly But my nested map Kinda not working there is a delay

Component Code

 renderLine = () => {
    let test = this.props.test.get('master')
   return test.map(line => {
       return line.check.map( (ltr,i) =>  ltr.status ? <span key={i} className="correct">{ltr.letter}</span> : ltr.letter )
   })

};
handleKeyPress = e => {
    if(e.charCode === 32) {
        this.setState({
            pushToNext:true,
            currentTyping:""
        })
    }
};
handleInput = e => {
    if(e.target.value !== " "){
        let {storeValue} = this.state;
        console.log(storeValue.length);
        let updatedWord = e.target.value;
        let updateArr = [];
        if(storeValue.length  ===  0){
            updateArr = storeValue.concat(updatedWord)
        }else {
            if(this.state.pushToNext){
                updateArr = storeValue.concat(updatedWord)
            }else {
                storeValue.pop();
                updateArr = storeValue.concat(updatedWord);
            }
        }
        this.setState({
            currentTyping:updatedWord,
            storeValue:updateArr,
            pushToNext:false
        },() => {

            let {storeValue} = this.state
            let lastWordIndex = storeValue.length === 0 ? storeValue.length : storeValue.length - 1;
            let lastLetterIndex = storeValue[lastWordIndex].length === 0 ? storeValue[lastWordIndex].length : storeValue[lastWordIndex].length - 1;
            let lastWordValue = storeValue[lastWordIndex];
            let lastLetterValue = lastWordValue[lastLetterIndex];

            // console.log(lastWordIndex,lastLetterIndex,lastWordValue,lastLetterValue,"After tstae")
            return this.props.compareCurrentTextWithMater(lastWordIndex,lastLetterIndex,lastWordValue,lastLetterValue)

        });

    }







};

Redux Reducer

import {FETCH_USER_TYPING_TEXT,COMPARE_TEXT_WITH_MASTER} from "../actions/types";
import {fromJS} from 'immutable';

const initialState = fromJS({
    text:null,
    master:[],
    inputBoxStatus:false
});

export default function (state = initialState,action) {
    switch (action.type){
        case FETCH_USER_TYPING_TEXT:
            return setTextManipulated(state,action);
        case COMPARE_TEXT_WITH_MASTER:
            return compareTextWithMaster(state,action)
        default:
            return state
    }
}


const compareTextWithMaster = (state,action) => {

    let {lastWordIndex,lastLetterIndex,lastLetterValue} = action;
    let masterWord = state.get('master')[lastWordIndex];
    let masterLetter = masterWord.check[lastLetterIndex];
    let newState = state.get('master');

    if(typeof masterLetter !== "undefined"){
        if(masterLetter.letter === lastLetterValue){
            masterWord.check[lastLetterIndex].status = true;
            newState[lastWordIndex] = masterWord;
            return state.set('master',newState)
        }else {
            masterWord.check[lastLetterIndex].status = false;
            newState[lastWordIndex] = masterWord;
            return state.set('master',newState)
        }

    }else {
        console.log('Undefinedd  Set Eroing or wrong Space Chratced set Box Red Colot',newState);


    }

};

UPDATE

I did the same Logic with plain React.js it works Perfectly and nested map rendering the if else logic properly there is no on letter delay

https://codesandbox.io/s/zx3jkxk8o4

But the same logic with Redux State with immutable js Does'nt take effect with nested loop if else statement I don't know where the problem Relies ..and My Code Snippet will be little bit different from CodeSanbox COde But the Logic is Same

Answer 1

Probably, the diffing algorithm of react does see that oldState === newState and skips the re rendering. To avoid that situation, use a new object in the root of the state so that the above check returns false. I see that you use immutableJs, so maybe force re-render with componentShouldUpdate method instead.

Also consider using dev tools to step through the code line by line to see what is going on.

If nothing at all works, switch to something simpler with less dependencies and go from there, incrementally adding what you need.