React Redux Input handle

Question

I'm trying to handle simple input value using react-redux and then trying to display it. I know how to display it but i have no idea how to submit input value from component to redux store. I searched web and found nothing. Can someone explain how to do this? I'm totally new to react-redux

import React from "react";
import "./App.css";
import { connect } from "react-redux";
import { useState } from "react";
import { updateValue, addValue } from "./actions/inputActions";

function App(props) {
  const [value, setValue] = useState("");
  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return (
    <div className="App">
      <form onSubmit={(value) => props.submitValue(value)}>
        <input onChange={handleChange} value={value} type="text" />
        <button type="submit">Add</button>
      </form>
      <h1>{props.value}</h1>
    </div>
  );
}
const mapStateToProps = (state) => {
  return {
    value: state.value,
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
    submitValue: (e, value) => {
      e.preventDefault();
      dispatch(addValue(value));
    },
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(App);

Please attach code snippets to your question. Show what you tried to do to solve the problem. — aopanasenko
– aopanasenko, Commented Apr 16, 2020 at 17:42

Aadil Mehraj · Accepted Answer · 2020-04-18 18:03:32Z

1

Update your onSubmit function with the value stored in your local state, like this:

<form onSubmit={(e) => {
  e.preventDefault();
  props.submitValue(value)
}}>
  <input onChange={handleChange} value={value} type="text" />
  <button type="submit">Add</button>
</form>

And your mapDispatchToProps function like this:

const mapDispatchToProps = (dispatch) => {
  return {
    submitValue: (value) => {
      dispatch(addValue(value));
    },
  };
};

edited Apr 18, 2020 at 18:03

answered Apr 16, 2020 at 17:55

Aadil Mehraj

2,6141 gold badge9 silver badges17 bronze badges

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

2 Comments

MichalBart Over a year ago

Thanks mate! I've got 1 more question. How can i add preventDefault here?

Aadil Mehraj Over a year ago

Updated the code, you can check the onSubmit method

Collectives™ on Stack Overflow

React Redux Input handle

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related