Reactjs: How to fetch child object data in react-redux form -
the api gives data(json format) in following fashion:
[ { "_id": 1, "name": "xyz", "address": { "street": "", "pin_code": 69856, "country": "us", "city": "boston" } } ] how can fetch fields address above response? i'm using react-redux form.
here form field:
import react, {component} 'react'; import {reduxform} 'redux-form'; class fetchuserform extends component { render() { const { fields: {name, street, country}, handlesubmit } = this.props; return( <form onsubmit={handlesubmit}> <div classname='form-group'> <input type='text' classname='form-control' placeholder='user name' {...name}/> </div> <div classname='form-group'> <input type='text' classname='form-control' placeholder='street' {...street}/> </div> <div classname='form-group'> <input type='text' classname='form-control' placeholder='country' {...country}/> </div> <button type='submit' classname='btn btn-primary'> update </button> <button type='reset' classname='btn btn-default'> cancel </button> </form> ); } } export default reduxform ({ form: 'fetchuserform', fields: ['name', 'street', 'country'] },null, { fetchuser })(fetchuserform); as seen, i'm trying fetch street , country child object of data. can pls me actual data in form. i'm getting null
you missing show code/component using form. yet, i'm guessing somewhere in other/same component should calling initialize redux-form. since, haven't provided information, i'm assuming things here, overall how should be:
import react, {component} 'react'; import {reduxform} 'redux-form'; import { connect } 'react-redux'; import { initialize } 'redux-form'; class someclass extends component { constructor(props){ super(props); } render() { const myinitialvalues = { initialvalues: { "name": this.props.user.name, "street": this.props.user.address.street, //note "country": this.props.user.address.country //and } } const { handlesubmit } = this.props; return( <fetchuserform {...myinitialvalues} onsubmit={this.somefunction.bind(this)}/> ); } } function mapstatetoprops(state) { return{ user:state.user } } export default connect(mapstatetoprops,{someaction})(someclass); check how i've declared variable/field names in initialvaluesobject. how can done. hope got overall idea..
Comments
Post a Comment