ReactJS is a popular JavaScript library used for building user interfaces. One common requirement in web development is the ability to change the position of an element dynamically based on certain conditions or user interactions. In this article, we’ll explore how to achieve this in 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
Javascript
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`, }} > neveropen </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
