How to change the position of the element dynamically in ReactJS ? - GeeksforGeeks

22 Apr, 2021
In this article we will learn to change the position of an element dynamically using ReactJS
Approach: We are going to use following steps:
Assume the position of our element is 0 on x-coordinate and 0 on y-coordinate.
Then we will add/subtract some value from x/y coordinate depending on the direction we are moving.
Keep all of these values in the state so that we can see the change in real-time
Update the coordinates in state and we will see the position of element changing.
Setting up environment and Execution:
Step 1: Create React App commandnpx create-react-app foldername
Step 1: Create React App command
npx create-react-app foldername
Step 2: After creating your project folder, i.e., folder name, move to it using the following command:cd foldername
Step 2: After creating your project folder, i.e., folder name, move to it using the following command:
cd foldername
Project Structure: It will look like the following.
App.js
import React, { Component } from "react";  class App extends Component {    // Create state  state = {    xoffset: 0,    yoffset: 0,    delta: 10,  };     moveTitleToDown = () => {    this.setState(      { yoffset: this.state.yoffset         + this.state.delta });  };  moveTitleToRight = () => {    this.setState(      { xoffset: this.state.xoffset         + this.state.delta });  };  moveTitleToLeft = () => {    this.setState(      { xoffset: this.state.xoffset         - this.state.delta });  };  moveTitleToUp = () => {    this.setState(      { yoffset: this.state.yoffset         - this.state.delta });  };     render() {    return (      <div>        {/* Element to Move Dynamically */}        <h2          style={{            position: "absolute",            left: `${this.state.xoffset}px`,            top: `${this.state.yoffset}px`,          }}        >          GeeksforGeeks        </h2>           {/* Move Controls */}        <div style={{ marginTop: "80px" }}>          <button onClick={this.moveTitleToRight}>            Move Title To Right          </button>          <button onClick={this.moveTitleToDown}>            Move Title To Down          </button>          <button onClick={this.moveTitleToLeft}>            Move Title To Left          </button>          <button onClick={this.moveTitleToUp}>            Move Title To Up          </button>        </div>      </div>    );  }}   export default App;
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, click on buttons to see output
Picked
React-Questions
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to navigate on path by button click in react router ?
How to create a table in ReactJS ?
How to check the version of ReactJS ?
Explain the purpose of render() in ReactJS
How to set background images in ReactJS ?
Express.js express.Router() Function
How to set input type date in dd-mm-yyyy format using HTML ?
Installation of Node.js on Linux
Differences between Functional Components and Class Components in React
How to create footer to stay at the bottom of a Web page?