Update field value from predefined value redux-form

Question

How to update redux form Field component value that was predefined from my redux store ? I see my values in the fields but I can't type to update them. I need to trigger onChange event but I don't know how. Maybe is some way to set initialValue ? My package file:

"redux": "3.7.2",
"redux-form": "^7.1.2",
"react": "16.0.0",

PS. I wanted to use defaultValue but since redux-form 5.0.0 it was deleted.

Code:

import React,{Component} from 'react';
import {Field, reduxForm} from 'redux-form';
import {connect} from 'react-redux';
import {fetchCeoData} from '../../actions/CMS';

class CEOForm extends Component{
  constructor(props) {
    super(props);
    this.renderTextarea = this.renderTextarea.bind(this);
  }

  componentDidMount(){
    this.props.fetchCeoData();
  }

  submit(values){
    console.log(values);
  }

  componentWillReceiveProps(nextProps){
    console.log(nextProps);
  }

  renderTextarea({_id, title, description, content, input}){
    return(
      <div key={_id} className="cms-form-row">
        <label htmlFor={title}>{description}</label>
        <textarea {...input} value={content} rows="6" cols="50"></textarea>
      </div>
    )
  }
  render(){
    return(
      <section id="ceo-form">
        <h1 className="cms-section-header">Narzędzia CEO</h1>
        <div className="ceo-form-wrapper">
          <form onSubmit={this.props.handleSubmit(this.submit)}>
            {this.props.ceoData.map((item) => {
              return <Field
                name={item.title}
                key={item._id}
                title={item.title}
                content={item.content}
                description={item.description}
                component={this.renderTextarea}
              />
            })}
            <button type="submit">Wyślij !</button>
          </form>
        </div>
      </section>
    )
  }
}

function mapStateToProps(state){
  return{
    ceoData: state.ceoData
  }
}

function loadData(store) {
  return store.dispatch(fetchCeoData());
}

CEOForm = connect(mapStateToProps, {fetchCeoData})(reduxForm({form: 'ceo', enableReinitialize : true})(CEOForm));

export default{
  loadData,
  component: CEOForm
}

Have a look at this answer. I guess this is what you are looking for https://stackoverflow.com/questions/45230531/how-to-programatically-set-redux-form-field-value/45231071#45231071 — Shubham Khatri, Nov 20 '17 at 13:34
i can't understand what you want exacly, your problem is, how can i initial dynamic input names? — , Nov 20 '17 at 13:46
Maybe I used wrong words. I have predefined value from my redux store and I want to update it by placing it in the field, editing and firing off an action to my API — CacheGhost, Nov 20 '17 at 14:09
@CacheGhost please check the answer in my above comments, it does answer as to how you can programatically update redux form values — Shubham Khatri, Nov 20 '17 at 15:19

score 0 · Answer 1 · answered Nov 21 '17 at 06:09

Ok. Here is what I end up with. I was reading post sugested in the comments: How to programatically set Redux-Form Field value But this solution Is kinda weird because you are manipulating by if statements. I've came up with something like this: In mapStateToProps I used object property described in redux form as initialValue example:

Function mapStateToProps(state){
var data = _.pick(state.myprops, "name" );
return{
    myprops: state.myprops,
    initialValue: {
        'nameOfMyField': data.name.fieldname
    } 
} 
}

Update field value from predefined value redux-form

1 Answers1