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;

Possible duplicate at stackoverflow.com/questions/43441856/… — dongnhan
– dongnhan, Commented Feb 8, 2021 at 8:10

HelloWorldEngineer · Accepted Answer · 2021-02-08 09:03:40Z

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}>
   </>
   )
  }

answered Feb 8, 2021 at 9:03

HelloWorldEngineer

6,42718 gold badges80 silver badges133 bronze badges

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

Collectives™ on Stack Overflow

React How To Scroll To Particular Position

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related