How to clear input field after clicking submit in react js redux

Question

I am developing a small project to learn react redux, I had a good view of connecting react with redux. I am trying to perform a small task that is clearing the input box after hitting submit, I've tried using reset, wrote separate function to clear the state and included the logic to clear input in handleSubmit handler itself, I didn't get the expected output. Can anyone guide me how to achieve this. Thanks in advance.

AddRemainder.js File : 

import React, { Component } from "react";
import { connect } from "react-redux";
import addRemainder from "../../redux/action.js";

class AddRemainderPage extends Component {
  state = {
    reminder: {
      title: "",
    },
  };

  handleChange = (e) => {
    const reminder = { ...this.state.reminder, title: e.target.value };
    this.setState({ reminder });
  };

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.dispatch(addRemainder(this.state.reminder));
      
  };

  render() {
    return (
      <div className="App">
        <div>
          <h2>My First Redux UnderStanding</h2>
          <form onSubmit={this.handleSubmit}>
            <input
              type="text"
              onChange={this.handleChange}
              value={this.state.reminder.title}
            />

            <input type="submit" value="Save" />
          </form>
        </div>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    reminderss: state.reminderss,
  };
};

export default connect(mapStateToProps)(AddRemainderPage);

Action.JS File:

const addRemainder = (text) => ({
  type: "ADD_REMINDER",
  rem: text,
});

export default addRemainder;

Reducer.JS File:

const intialState = {
  reminderss: [],
};

const remindersReducer = (state = intialState, action) => {
  switch (action.type) {
    case "ADD_REMINDER":
      return {
        reminderss: [...state.reminderss, action.rem],
      };
    default:
      return state;
  }
};

export default remindersReducer;

Rashed Rahat · Accepted Answer · 2021-08-02 19:39:36Z

3

Try this way:

clearInput = () => {
const reminder = { ...this.state.reminder, title: '' };
this.setState({ reminder });
};

handleSubmit = (e) => {
e.preventDefault();
this.props.dispatch(addRemainder(this.state.reminder));
this.clearInput();
};

answered Aug 2, 2021 at 19:39

Rashed Rahat

2,5152 gold badges25 silver badges45 bronze badges

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

2 Comments

Still_Learning Over a year ago

thank you it's working. If I am adding more than 5 values in state shall I do like below ? const reminder = { ...this.state.reminder, title: '', abc:"", xyz:"", };

Rashed Rahat Over a year ago

Yeah, same way you can do it for N number of input fields

Collectives™ on Stack Overflow

How to clear input field after clicking submit in react js redux

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