How to change the position of the element dynamically in ReactJS ?
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 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
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