Not getting desired values in input fields React redux or ReactJS

Question

import React, { Component } from 'react';
let _ = require('lodash');

import {bindActionCreators} from "redux";
import {connect} from 'react-redux';

import {fetchedZonesEdit} from '../../actions/';

class InfoRow extends Component {

  constructor(props){
    super(props); 
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {

        this.setState({
            [event.target.name]: event.target.value
        });

    }

    render() {
        return (
            
            <tr>
                <td>
                  {this.props.zone}
                </td>
                <td>{this.props.zoneValue}
                <input type="text"
                   className="form-control"
                   defaultValue={this.props.zoneValue}
                   value={this.props.name}
                   name={this.props.zone}
                   onChange={this.handleInputChange}
                />
                </td>
            </tr>
        )
    }
}

class ZoneDetailsEdit extends Component {

    render() {

        const rows = [];
        let a = this.props.ezn;
        

       Object.keys(this.props.ezn).map((keyName, keyIndex) =>{

          return rows.push(<InfoRow zone={keyName} zoneValue={a[keyName].toString()} key={keyIndex}/>)
       });

        return (


            <div className="col-md-6">
                <div className="">

                  <table className="table table-clear">
                    <tbody>
                      {rows}
                    </tbody>
                  </table>
                 </div>
                 <div className="row px-1" >
                      <div className="px-2">
                        <button className="btn btn-sm btn-info">Save</button>
                 </div></div>
          </div>

        )

    }


}

class ZoneDetailEditComponent extends Component {

  componentWillMount = () => {
        this.props.fetchedZonesEdit(this.props.location.query.id);
    };

  
  render() {
    
    return (
        <div className="container px-3 mr-3">
            <div className="row">
              <div className="col-md-6 col-md-offset-3"><h1>Edit Tag Information</h1></div>
            </div>
            <br/>
            <br/>
                { this.props.ezn != null?
            <div>
                <ZoneDetailsEdit ezn={this.props.ezn}/>
            </div> :
                    <center><br /><h1><img src={'img/avatars/default.gif'} alt="Loading"/><br />Loading</h1></center>

            }
        </div>
    )
  }
}

function mapStateToProps(state) {
    return {
        ezn: state.zones
    }

}


function matchDispatchToProps(dispatch){
    return bindActionCreators({fetchedZonesEdit: fetchedZonesEdit}, dispatch);
}

export default connect(mapStateToProps, matchDispatchToProps)(ZoneDetailEditComponent);

This is the snippet i provided what I'm doing right now is i had fetched the data from the api and was shown in the input fields but the issue is data is fetched correctly but when i print outside input fields it works fine but when i enter in input fields as default value it doesn't works screenshot also provided when opened the page default values are set of previous page but when it is refreshed it works fine

Don't use both value and defaultValue. That does not make sense. — Sulthan
– Sulthan, Commented Apr 18, 2017 at 9:34

Sulthan · Accepted Answer · 2017-04-18 09:59:41Z

2

defaultValue should be used only on Uncontrolled components.

Instead of using defaultValue, assign a default value to the name in your store.

Also, don't use this.setState if you are using redux. You are assigning the new value to this.state.zone which you never read.

edited Apr 18, 2017 at 9:59

answered Apr 18, 2017 at 9:38

Sulthan

130k23 gold badges223 silver badges277 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shubham Khatri · Accepted Answer · 2017-04-18 11:17:10Z

Since you are using a controlled component you need not use defaultValue, assigning the props passed down to the value will suffice.

Also using redux, a better practice is to store the UI state in localState and all others in the redux store.

To do that you need to dispatch an action that updates the corresponsing reducer after passing the values to the topmost parent

Also you are not passing any prop as name to the InfoRow component and since defaultValue is rendered only at the time of create, you do not see the update.

You code must look something like

import React, { Component } from 'react';
let _ = require('lodash');

import {bindActionCreators} from "redux";
import {connect} from 'react-redux';

import {fetchedZonesEdit} from '../../actions/';

class InfoRow extends Component {

  constructor(props){
    super(props); 
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {

        this.props.handleChange(this.props.zone, event.target.value);


    }

    render() {
        return (

            <tr>
                <td>
                  {this.props.zone}
                </td>
                <td>{this.props.zoneValue}
                <input type="text"
                   className="form-control"
                   value={this.props.zoneValue}
                   name={this.props.zone}
                   onChange={this.handleInputChange}
                />
                </td>
            </tr>
        )
    }
}

class ZoneDetailsEdit extends Component {

    handleChange(zone, value) {
         //pass it to the parent and then fire an action from there to update this value in the store

    }
    render() {

        const rows = [];
        let a = this.props.ezn;


       Object.keys(this.props.ezn).map((keyName, keyIndex) =>{

          return rows.push(<InfoRow zone={keyName} zoneValue={a[keyName].toString()} handleChange={()=> this.handleChange}key={keyIndex}/>)
       });

        return (


            <div className="col-md-6">
                <div className="">

                  <table className="table table-clear">
                    <tbody>
                      {rows}
                    </tbody>
                  </table>
                 </div>
                 <div className="row px-1" >
                      <div className="px-2">
                        <button className="btn btn-sm btn-info">Save</button>
                 </div></div>
          </div>

        )

    }


}

Also there is no need for you to bind the lifeCycle function with arrows

Collectives™ on Stack Overflow

Not getting desired values in input fields React redux or ReactJS

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related