I want to fetch data from input field react-redux

Question

it's just a simple task getting me confused I want to get the data of the input field

I want to fetch it on to console

const MessageForm = ({ handleSubmit, onSubmit }) => (
 <section className="form-container register-model-form">
   <form className="message-form" onSubmit={handleSubmit(onSubmit)}>

     <Input
       label="Write a message..."
       name="message"
       type="text"
     />
   </form>
 </section>
);

MessageForm.propTypes = {
 handleSubmit: PropTypes.func,
 onSubmit: PropTypes.func
};

MessageForm.defaultProps = {
 handleSubmit: noop,
 onSubmit: noop
};

export default reduxForm({
 form: "MessageForm"
})(MessageForm);

and here is my message .jsx

export default class Messages extends React.PureComponent {
   render() {
       return (
           <section className="page-notifications"> 
               <SubMenu/>
               <MessageForm/>
           </section>
       )
   }
}

Arnas · Accepted Answer · 2019-07-01 12:58:18Z

1

If you just want to log it on the console according to your question, pass handling function to onSubmit props like this:

<Input
  label="Write a message..."
  name="message"
  type="text"
  onChange={onSubmit}
/>

And in the parent component:

class Messages extends React.PureComponent {

  handleSubmit = (e) => {
    console.log(e.target.value);
  }

  render() {
    return (
      <section className="page-notifications"> 
        <SubMenu/>
        <MessageForm onSubmit={this.handleSubmit}/>
      </section>
    )
  } 
}

But if you mean to use redux-form you must change the Input component to Field:

import { Field, reduxForm } from 'redux-form'

const MessageForm = ({ handleSubmit, onSubmit }) => (
  <section className="form-container register-model-form">
    <form className="message-form" onSubmit={handleSubmit(onSubmit)}>

      <Field
        name="message"
        component="input"
        type="text"
      />
    </form>
  </section>
);

And change handleSubmit function to:

  handleSubmit = (value) => {
    console.log(value);
  }

edited Jul 1, 2019 at 12:58

answered Jul 1, 2019 at 11:00

Arnas

6708 silver badges21 bronze badges

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

6 Comments

Iron Woman Over a year ago

Thank you Arnas, its working perfectly after changing Input component to Field.

Arnas Over a year ago

You can see complete example use of redux-form in redux-form.com/8.2.2/examples

Iron Woman Over a year ago

after hitting the enter key I am getting an error - > cannot the property "value" of undefined in my parent container

Iron Woman Over a year ago

it worked but now console.log not showing any output

Arnas Over a year ago

it worked, I have tried it in codesandbox.io/embed/redux-form-simple-example-sq0vf

|

ravibagul91 · Accepted Answer · 2019-07-01 11:04:47Z

0

You can do this,

<Input label="Write a message..."
    name="message"
    type="text"
    onChange={handleChange}
    value={inputValue}
/>

You need to pass handleChange and inputValue to your MessageForm component.

In the parent component do this,

export default class Messages extends React.PureComponent {
    handleChange = (e) =>{
       console.log(e.target.value);
    }
     render() {
         return (
             <section className="page-notifications"> 
                 <SubMenu/>
                 <MessageForm handleChange={this.handleChange}/>
             </section>
         )
     } }

edited Jul 1, 2019 at 11:04

answered Jul 1, 2019 at 10:40

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

6 Comments

Iron Woman Over a year ago

import React from 'react'; import SubMenu from './SubMenu'; import MessageForm from './form/MessageForm'; handleChange = (e) =>{ console.log(e.target.value); } export default class Messages extends React.PureComponent { render() { return ( <section className="page-notifications"> <SubMenu/> <MessageForm/> </section> ) } }

ravibagul91 Over a year ago

You are writing handleChange function at wrong place , see the updated answer.

Iron Woman Over a year ago

Thank you for your valuable time it's working now as I am using redux I had to change Input component to Field

ravibagul91 Over a year ago

You can do the same thing using redux also. The way you are writing your handleSubmit function, same way write handleChange function and dispatch an action with inputValue i.e. e.target.value. Finally in your reducer you can change the state value.

ravibagul91 Over a year ago

You can also check this - stackoverflow.com/questions/38281957/…

|

Collectives™ on Stack Overflow

I want to fetch data from input field react-redux

2 Answers 2

6 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related