How To Reset Input Value After Clicking Submit Button?

import React, { useState } from 'react'; import './StockQuotes.css'; import { createMuiTheme, withStyles, makeStyles, ThemeProvider } from '@material-ui/core/styles'; import Butto

Solution 1:

A few things going on here:

1. stockData appears to just be an initial value for setting the component state. Once state is initialized, update and read from sharesToBuy so those changes flow to your component tree.
2. Don't mutate objects/state. That can cause bugs and prevent your component from updating properly. Instead, create a new copy with updated values.
3. Make your input controlled and update the value based on state changes.

// Convenience function for updating state.constupdateOwnedValue = (index, owned) => {
  // Instead of mutating the array/object, create a copy with the updated values// and then update state so the changes flow down to your components.const newState = sharesToBuy.map((stock, idx) => (
    idx === index ? { ...stock, owned } : stock
  ));

  setSharesToBuy(newState);
};

consthandleChange = (event, index) => {
  updateOwnedValue(index, parseInt(event.target.value));
}

consthandleClick = (event, index) => {
  event.preventDefault();
  dispatch(getStocksOwned(sharesToBuy));
  updateOwnedValue(index, 0);
}

...
// Iterate over component state instead of the imported value.
{sharesToBuy.map((stock, index) => (
  ...
  <input
    type="number"
    onChange={event =>handleChange(event, index)}
    value={
      // This makes your input a controlled component.// The value will respond to state changes.
      stock.owned
    }
  />
  ...
))}

Solution 2:

in handleClick function, at last reset your setSharesToBuy

as like, setSharesToBuy('');

Solution 3:

Clearing an Input

In order to reset the input upon hitting submit, you want the input to be a controlled component. This means that is gets its value from you passing it a value prop rather than storing it locally. Your handler for the submit event is then tasked with setting that value to 0.

Material UI supports both controlled and uncontrolled components so this should be an easy change, but it's made complicated by the messy control of data in your app. Where does the this entered value come from? Which value needs to change in order to set it to 0?

Data Structure

You need to think about what data exists and where it is stored. Data from from your json file should be used once to populate the initialState of your app or its redux store and that's it.

Right now you are actually mutating the stockData value which you imported from the json file. This is really bad design.

You can have some information which is stored in redux and some which is stored in the local component state, but it shouldn't be the same data in both places. The local state would be for local changes, like the number entered in the form before hitting the "Buy" button. While the current price for each stock should be stored in redux and accessed via useSelector.

This Revision isn't perfect, but hopefully it puts you on the right track.

Nested Components

In the demo that I linked to above you might notice that the input component loses focus when you type a character. The reason that this happens is that you have defined the components StyledTableCell and StyledTableRow inside of your StockQuotes component. That means that these components will get recreated every time that the state changes. The input is not seen as the same input because the table cell that it's inside of is a different table cell and that's why it loses focus.

You want to define your styled components as top level components outside of your StockQuotes component. (I tried just copy and pasting them outside but this introduced other errors. As a temporary hack solution you could useMemo to avoid re-creation, but this is not ideal.)