10 React Challenges (Beginner): DOM Movement with Events

Celý článek

Styling elements or in some instances, components in a React project is essential. Sometimes, you need to make a change in the style of an element based on changes in the application using JavaScript.

In this challenge, we will change a CSS property when a certain event is fired or a state value in the application is changed.

• CodePen Final: https://codesandbox.io/s/qq4xww2jzj\
• CodePen Starter: https://codesandbox.io/s/k3yy75w3wo\

The Challenge: Move a Box Up

This challenge requires you to move the position of a provided box upwards whenever a button is clicked.

The tasks in this challenge are:

• Create a state variable to hold the value of the transformation points.
• Handle an event which increments or decrements the transformation points.
• Bind the transformation using inline CSS to the created box.

Starter Code

Fork this CodeSandbox to get started: https://codesandbox.io/s/k3yy75w3wo

Styling is provided in the starter CodeSandbox, feel free to use it.

Here's what the final application looks like:

Bonus Points

Try to move the box in multiple directions with various buttons. You can also have the box tracking the mouse.

Fork this CodeSandbox to get started: https://codesandbox.io/s/k3yy75w3wo

Hint

Look up the transform CSS property as well as its corresponding translateY function.

The Solution: Move Box Upward

Various CSS-in-JS solution exists which enable you to write CSS in JavaScript files. In this React challenge, we will update the value of a CSS property in a component using JavaScript.

For this challenge, we are required to move a provided box upwards on the click of a button. This button when clicked updates a created state value and this value is passed to the transform CSS property of the box.

The translateY function is used to displace the box in the 2D plane. This challenge is completed in 3 steps:

• Store offset value in state.
• Create a function to decrement the offset value.
• Bind the offset value to the box and the function to the trigger button.

Store Offset value in State

The useState React hook is used to create a state variable alongside its corresponding update method. The initial value of offsetTop is 300. This initial value will serve as the offset from the original position of the box vertically.

Create a state variable named offsetTop in the App() component and set the initial value to 300. Do this with:

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import ScotchInfoBar from './ScotchInfoBar';
import './styles.css';

function App() {
  const [offsetTop, setOffsetTop] = useState(300);

  return (
    <div className="App">
      <h1>Move the Box!</h1>

      {/_ handle the click event on this button _/}
      <button>???? Move Up ????</button>

      {/_ move this box using inline styles _/}
      <div
        className="box"
        style={{}}
      />

    </div>
  );
}

Decrement offsetTop

To move the box closer to the top, reduce the value of offsetTop. Create a function which reduces its value by 50. You can use any value you want. 50 allows the box to move a good amount. Do this in App() with:

import // ... import dependencies 

function App() {
  const [offsetTop, setOffsetTop] = useState(300);

  function moveBoxUp() {
    setOffsetTop(offsetTop - 50);
  }

  return (
    <div className="App">

            // App content goes in here

    </div>
  );
}

The moveBoxUp function will be called whenever the "Move Up" button is clicked.

Bind Data to Box and Button

We now have the transformation data with which we can move the box upward. Add an in-line style with a transformation property and its value which uses the translateY function to displace the box from the top. Do this with:

import // ... import dependencies

function App() {
  // Component variables

  return (
    <div className="App">
      <h1>Move the Box!</h1>

      {/_ handle the click event on this button _/}
      <button>???? Move Up ????</button>

      {/_ move this box using inline styles _/}
      <div
        className="box"
        style={{
          transform: `translateY(${offsetTop}px)`
        }}
      />

      <ScotchInfoBar />
    </div>
  );
}

Using template literals, we included the offsetTop variable in the in the transform property. This sets the box down the page by 300px.

In the "Move Up" button, use the onClick event handler to call the moveBoxUp function anytime the button is clicked. Do this with:

import // ... import dependencies

    function App() {
      // Component variables

      return (
        <div className="App">
          <h1>Move the Box!</h1>

          {/_ handle the click event on this button _/}
          <button onClick={moveB}>???? Move Up ????</button>

          {/_ move this box using inline styles _/}
          <div
            className="box"
            style={{
              transform: `translateY(${offsetTop}px)`
            }}
          />

          <ScotchInfoBar />
        </div>
      );
    }

With this, once the button is clicked, the function decrements the value of the offset from the top by 50px.

Here's what the final page looks like:

You can find the completed CodeSandbox here: https://codesandbox.io/s/qq4xww2jzj

https://codesandbox.io/s/qq4xww2jzj

Conclusion

In this challenge we made a style change to a React component using JavaScript.

Have you got questions, suggestions, and comments? We'd love to see them in the comment section. You can find other challenges here and join the live streams here. Happy keyboard slapping!