React How To Scroll To Particular Position

Question

I'm trying to map the state array and add input fields after the user fill input and save on that time if any input is '' or null or if any field does not match as per pattern string then I want to scroll the page to that error field so user get notified about error field

How To Scroll Page To That Element Thanks In Advance

import { Container, TextField, Button } from "@material-ui/core";
import React, { Component } from "react";

class Home extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [
        { product_name: "", product_price: "", product_qty: "" },
        { product_name: "", product_price: "", product_qty: "" },
        { product_name: "", product_price: "", product_qty: "" },
      ],
    };
  }

  changeHandler(eventValue, index, action) {
    if (action === "p_name") {
      //updating value
    } else if (action === "price") {
      //updating value
    } else if (action === "qty") {
      //updating value
    }
  }

  saveData() {
    //check if any fields contains "" value
    //if null found then scroll to that field
  }

  render() {
    return (
      <div>
        {this.state.data.map((field, key) => {
          return (
            <Container key={key}>
              <TextField
                fullWidth
                id="outlined-basic"
                label="Product Name"
                onChange={(e) =>
                  this.changeHandler(e.target.value, key, "p_name")
                }
                value={field.product_name}
                variant="outlined"
              />
              <TextField
                fullWidth
                id="outlined-basic"
                label="Product Price"
                onChange={(e) =>
                  this.changeHandler(e.target.value, key, "price")
                }
                value={field.product_price}
                variant="outlined"
              />
              <TextField
                fullWidth
                id="outlined-basic"
                label="Product Qty"
                onChange={(e) => this.changeHandler(e.target.value, key, "qty")}
                value={field.product_qty}
                variant="outlined"
              />
            </Container>
          );
        })}

        <Button onClick={this.saveData}>Save</Button>
      </div>
    );
  }
}

export default Home;

Answer 1

Use hooks, not class, it will make your code shorter and easier to read. Here, you could simply pass a ref to the anchor element, and add an event listener that would make the window smoothly scroll to it in case an error is caught. Something like:

function Foo(){
  const ref = useRef(null);
  useEffect(() => {
    if (error) {
      ref.current?.scrollIntoView({behavior: "smooth"});
    }
  }, [error, ref]);
  
  return (
   <>
    <input ref={ref}>
   </>
   )
  }