React Js How do you call the same functions from two React Redux Fields?

Question

Component method gets called for both Title and Content fields when React is initially rendered. However, while additional input change in Title field calls the renderField method, the Content field doesn't seem to do so. This is reflected in the console log where the initial component load produced 2 "input changed" and for additional changes in the title, "input change" prints, but no responses occur when changes are made to the content field. What's going on?

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';

class PostNew extends Component {

    renderField(field) {
        console.log('input changed')
        return(
            <div>
                <label>{field.label}</label>
                <input
                    type="text"
                    {...field.input}
                />
            </div>
        );
    }

    render() {
        return(
            <form>
                <Field
                    label="Title"
                    name="title"
                    component={this.renderField}
                />
                <Field
                    label="Content"
                    name="content"
                    component={this.renderField}
                />
            </form>
        )
    }
}


export default reduxForm({
    form: 'PostsNewForm' // form property is the name of the form
})(PostNew);

I pasted your renderField and render methods into my React project and it worked for both. Not sure why it's not working for you. — hellojebus
– hellojebus, Commented May 28, 2017 at 0:17
Could you try it in this project? github.com/datumsays/React-Redux-Error — MLhacker
– MLhacker, Commented May 28, 2017 at 0:35
It's the pretty much the same code. I'm wondering if this is a package issue. — MLhacker
– MLhacker, Commented May 28, 2017 at 0:35

hellojebus · Accepted Answer · 2017-05-28 00:53:32Z

1

Ok I was able to replicate your issue. The problem is that redux-form isn't just plug and play. You need to add it into your root reducer as shown below:

//src/reducers/index.js

import { combineReducers } from 'redux';
import {reducer as form} from 'redux-form';

const rootReducer = combineReducers({
  state: (state = {}) => state,
  form
});

export default rootReducer;

The form fields work as expected for me once I added that. I've uploaded a copy of your Github project with a working example:

https://github.com/hellojebus/so-Answer

edited May 28, 2017 at 0:53

answered May 28, 2017 at 0:43

hellojebus

3,6731 gold badge23 silver badges24 bronze badges

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

8 Comments

MLhacker Over a year ago

Okay. Let me try your suggestion

MLhacker Over a year ago

Tried it, but it didn't work. One thing I want to note though is that in either cases I do get an error saying the following: "bundle.js:1212 Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded "

MLhacker Over a year ago

Though I've been ignoring it since I was still able to make method call when changing the title input.

hellojebus Over a year ago

A javascript error will cause your code to stop executing, so we will need to handle that issue before moving forward. Make sure you are not referencing React twice in any of your files.

hellojebus Over a year ago

Also, are you using refs in your code at all? I don't see any in the github link you posted.

|

MLhacker · Accepted Answer · 2017-05-28 01:15:03Z

0

For anyone who encountered a similar issue as mine. The source of the problem ultimately came from the fact that the redux-form package didn't install at all. So either use yarn install redux-form or try npm but ensure check that npm works.

answered May 28, 2017 at 1:15

MLhacker

1,5224 gold badges21 silver badges35 bronze badges

Collectives™ on Stack Overflow

React Js How do you call the same functions from two React Redux Fields?

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related