CODEWITHSUNDEEP
reactjsredux
Iron Woman
Iron Woman

Reputation: 11

I want to fetch data from input field react-redux

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

Upvotes: 1

Views: 684

Answers (2)

Arnas
Arnas

Reputation: 662

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

Upvotes: 1

ravibagul91
ravibagul91

Reputation: 20765

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

Upvotes: 0

Related Questions