Input value referencing nested child object in redux state not updating Code Answer

I have a function on redux that takes an object, the path to the value that needs updating, and the value.

I have inputs that value is equal to the value of the object on state.

When the listingObj changes on redux, i need the dom to refresh.

The reason i need this to refesh dom is beacuse i have an autofill with companies and when a user selects a company it updates all the values on the listingObj on redux state accordingly.

Thanks in advance!

     import axios from 'axios';

var initialState = {
    listingObj: null,


export function updateObj(obj, path, value) {
    if (!path && !value) {
        console.log('obj on mount', obj)
        return {
            type: UPDATE_LISTING_OBJ,
            payload: obj
    } else {
        console.log('updated obj', obj)
        path.split(",").slice(0, -1).reduce((obj, key) => obj[key] || (obj[key] = {}), obj)[path.split(",").pop()] = value;
        return {
            type: UPDATE_LISTING_OBJ,
            payload: obj

export default function reducer(state = initialState, action) {
    switch (action.type) {
        case UPDATE_LISTING_OBJ:
            return Object.assign({}, state, { listingObj: action.payload })

        default: return state;

   import React from 'react';
import { connect } from 'react-redux';
import TextField from 'material-ui/TextField';
import axios from 'axios';
import { updateObj } from '../../../ducks/reducers/main_reducer'

class PropertyEdit extends React.Component {
    constructor(props) {
        this.state = {
            listing_id: ''

    componentDidMount() {
        let user_id = localStorage.getItem('user_id');
        let listing_id = this.props.listingId
            listing_id: listing_id
        axios.get(`/api/listings/${listing_id}`).then((res) => {

    handleChange = path => event => {
        this.props.updateObj(this.props.listingObj, path,

    render() {
        return (
<CompanyNameAutofil />
      label="Owner Street Address"
       value={( && ? : null}


function mapStateToProps(state) {
    return state

export default connect(mapStateToProps, { updateObj })(PropertyEdit)


When you use redux to update a value, componentWillReceiveProps will be called in any components that subscribe to that portion of the redux store. You can use setState in componentWillReceiveProps to update some values in state which will trigger a render. However, if state doesn’t need to be updated to reflect the changes you can also use this.forceUpdate() which will force the DOM to render again despite there being no change. It is worth noting that forceUpdate() should be use sparingly.

Related Posts

© No Copyrights, All Questions are retrived from public domain.
Tutorial Guruji