1

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
}
4
  • Have a look at this answer. I guess this is what you are looking for stackoverflow.com/questions/45230531/… Nov 20, 2017 at 13:34
  • i can't understand what you want exacly, your problem is, how can i initial dynamic input names?
    – user5738822
    Nov 20, 2017 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, 2017 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 Nov 20, 2017 at 15:19

1 Answer 1

0

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
    } 
} 
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.