Material-ui TextField messing up with react-redux

Question

I have a react component with a TextField in it:

<TextField
    hintText="name"
    floatingLabelText="Your name:"/>

The component is connected to the store via a container generated using the connect function of react-redux. For now there are no parameters passed to the container. And no action is dispatched anywhere in the component.

When I try to enter some text in my TextField, I see some action being dispatched, from redux-devtools I can see:

It's always the same SET_FOCUS_PAGE action being dispatched for each character I enter, with the page attribute set to the change event of the TextField. Also on the console I have a lot of those warnings:

Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property `bubbles` on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist(). See react-event-pooling for more information.

I failed to make sense of all this, why is the SET_FOCUS_PAGE being dispatched by a component that do not have access to the action ? How can the change event end up in the page attribute? What is happening there !?

Answer 1

It looks like you are passing the synthetic event to the redux state tree. More likely you want the value instead of the event itself.

For instance:

<TextField
    hintText="name"
    floatingLabelText="Your name:"
    onChange={(event) => handleChangeText(event)}
/>

which calls:

const handleChangeText = (event) => {
    console.log('the text is:', event.target.value);
}

If you update your state tree with that, then you should be getting what you need. Where I wrote the console.log would be where you fire off the action to capture your input.