Component does not render based on state change in react-redux

Question

Project is not rendering when mapStateToProps is updated and props is not accepting in project component and if using combinereducers it works but without combinereducers the project is not rendering

 reducer.js

This is my reducer where i have maintained state but it gets updated here but in project component its does rendering state is updated

   export const initialState={
    rows:[],
    projectformvalue:{
    projectname:"",
    companyname:"",
    description:"",
    estimationcost:"",
  },
  tabledisplay:false,
  open:true,
}
const reducer=(state=initialState,action)=>{
  const newState={...state};
  if(action.type==='CHANGE'){
     return {...state, projectformvalue:{...state.projectformvalue, [action.payload.name]:action.payload.value}}
  } 
   else if(action.type==='SAVE'){
     let temp = state.rows;
     console.log(state.projectformvalue);
     temp.push(state.projectformvalue);
     return {...state, "rows": temp}
      //newState.rows.push({ ...newState.projectformvalue});
   }
  return newState;
}
export default reducer;

  project.js 

         import React,{Component}from 'react';
         import Actions from './Actions';
         import {connect} from 'react-redux';
        class Project extends Component{



            render(){
               let {rows} = this.props.states;
               console.log(rows);
            return(
                <div className="employeeRegister">
                    <Actions/>
                <table>
                   <thead>
                       <tr>
                       <th>Project Name</th>
                       <th>Company Name</th>
                       <th>Description Name</th>
                       <th>Estimation Cost</th>
                       <th>Actions</th>
                       </tr>
                   </thead>
                   <tbody>
                   {rows.map(tablerows=>{
                       return (
                        <tr key={Math.random()}>
                           <td>{tablerows.projectname}</td>
                           <td>{tablerows.companyname}</td>
                           <td>{tablerows.description}</td>
                           <td>{tablerows.estimationcost}</td>
                           <td>
                               <button onClick={()=>this.props.handleEdit()}>Edit</button>
                           </td>
                       </tr>
                       )
                    })} 
                  </tbody>
               </table>
               </div> 
            )
        }
        }
        const mapStateToProps=(state)=>{
            console.log(state);
            return { states:state.rows }
            }
        export default connect(mapStateToProps)(Project);

Make sure your states contains an array named rows and use const instead of let in your render: const { rows } = this.props.states; — Milore

Jarvis Luong Jarvis Luong · Accepted Answer · 2018-12-25T06:40:05

In those lines:

let temp = state.rows;
 console.log(state.projectformvalue);
 temp.push(state.projectformvalue);

You are accidentally mutating state.rows (mutating the state will prevent react to re render the component when it changes). You should make a shallow copy instead like this:

let temp = [...state.rows]; // This won't mutate the old state.rows
 console.log(state.projectformvalue);
 temp.push(state.projectformvalue);

Component does not render based on state change in react-redux

1 Answers