React input field lose focus after typing one number

Question

Currently, as soon as I type a number, input field lose focus. So I took the sharesToBuy.map portion then assign it to variable then moved it outside StockQuotes component. Then I get error msg saying StyleTabledCell and StyleTable row not recogonized from material ui. How can I re-arrange my component so input field don't lose focus? Or is there any hook that I can use to solve this issue? I tried autofocus(), useRef and moving component outside, but nothing seems working.

import React, { useState, useEffect } from 'react';
import './StockQuotes.css'; 
import { createMuiTheme, withStyles, makeStyles, ThemeProvider } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import stockData from '../util/stockData';
import { useDispatch } from 'react-redux';
import { getStocksOwned } from '../slices/stocksOwnedSlice';

const StockQuotes = ({ availableFunds, setAvailableFunds }) => {

    const [sharesToBuy, setSharesToBuy] = useState(stockData);

    return( 
        <TableContainer component={Paper}>
            <Table className={classes.table} aria-label="customized table">
                <TableHead>
                    <TableRow>
                        <StyledTableCell>Stock Name</StyledTableCell>
                        <StyledTableCell align="right">Current Price</StyledTableCell>
                        <StyledTableCell align="right">Shares</StyledTableCell>
                        <StyledTableCell align="right">Order</StyledTableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                {sharesToBuy.map((stock, index) => (
                    <StyledTableRow key = {index} >
                        <StyledTableCell component="th" scope="row">
                            {stock.name}
                        </StyledTableCell>
                        <StyledTableCell align="right">${stock.price}</StyledTableCell>
                        <StyledTableCell align="right"><input type="number" value ={stock.owned} onChange={event => handleChange(event, index)}></input></StyledTableCell>
                        <StyledTableCell align="right">
                            <ThemeProvider theme={theme}>
                                <Button variant="contained" color="primary" className={classes.margin} 
                                disabled={stock.owned === 0 || !stock.owned}
                                onClick={event => handleClick(event, index)}>
                                    BUY
                                </Button>
                            </ThemeProvider>
                        </StyledTableCell>
                    </StyledTableRow>
                    ))}
                </TableBody>
            </Table>
        </TableContainer>
    )
}

Answer 1

Issue

You are defining your styled components within the render function of your StockQuotes component.

The entire function body of a functional component is the render function! The withStyles HOC will create a new component each time if within the render.

Solution

Simply move StyledTableCell and StyledTableRow outside of StockQuotes component.

const StyledTableCell = withStyles((theme) => ({
  head: {
    backgroundColor: theme.palette.common.black,
    color: theme.palette.common.white
  },
  body: {
    fontSize: 14
  }
}))(TableCell);

const StyledTableRow = withStyles((theme) => ({
  root: {
    "&:nth-of-type(odd)": {
      backgroundColor: theme.palette.action.hover
    }
  }
}))(TableRow);

const StockQuotes = ({ availableFunds, setAvailableFunds }) => {
  ...

  return (
    <TableContainer component={Paper}>
      <Table className={classes.table} aria-label="customized table">
        <TableHead>
          <TableRow>
            <StyledTableCell>Stock Name</StyledTableCell>
            <StyledTableCell align="right">Current Price</StyledTableCell>
            <StyledTableCell align="right">Shares</StyledTableCell>
            <StyledTableCell align="right">Order</StyledTableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {sharesToBuy.map((stock, index) => (
            <StyledTableRow key={stock.name}>
              <StyledTableCell component="th" scope="row">
                {stock.name}
              </StyledTableCell>
              <StyledTableCell align="right">${stock.price}</StyledTableCell>
              <StyledTableCell align="right">
                <input
                  type="number"
                  value={stock.owned}
                  onChange={(event) => handleChange(event, index)}
                ></input>
              </StyledTableCell>
              <StyledTableCell align="right">
                <ThemeProvider theme={theme}>
                  <Button
                    variant="contained"
                    color="primary"
                    className={classes.margin}
                    disabled={stock.owned === 0 || !stock.owned}
                    onClick={(event) => handleClick(event, index)}
                  >
                    BUY
                  </Button>
                </ThemeProvider>
              </StyledTableCell>
            </StyledTableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
};