0

I'm new to react, and I have few question about some react expressions.

I was watching the video to learn how to drag and drop components. The code below works, but I got confused by these things.

  1. Why const variable bindLogoPos became a function inside div? (line 8, line 18)
  2. What does the three dot means in this code? (I've learned that three dots usually mean the rest of array or object. But I think bindLogoPos is not quite related to an array or object)
  3. What does it mean to use {...bindLogoPos()} like this way? Does it means to call function infinitely? Is this expression possible only in react?
import logo from './logo.svg';
import './App.css';
import {useState} from 'react';
import {useDrag} from 'react-use-gesture';

function App() {
  const [logoPos, setLogoPos] = useState({x:0, y:0});
  const bindLogoPos = useDrag((params)=>{
    setLogoPos({
      x: params.offset[0],
      y: params.offset[1]
    });
  });

  return (
    <div className="App">
      <header className="App-header">
        <div {...bindLogoPos()} style={{
          position:'relative',
          top: logoPos.y,
          left: logoPos.x,
        }}>
        <img src={logo} className="App-logo" alt="logo" />
        </div>
////////more...
Juyeon
  • 35
  • 5

2 Answers2

0

First of all, you got to understand how React works.

React renders your component whenever the internal state changes, so bindLogoPos() would be called when the state of your component changes. Therefore, it won't be called infinitely, but only when the state of your component / app changes.

Secondly, that const x = () => {} is actually an assignment statement, and it assigns an anonymous function to a variable called bindLogoPos. Functions are first-class citizens in JavaScript (functional programming!), so that's why it works like that. Also, the reason why "const variable bindLogoPos became a function inside div" is because useDrag actually gets the function itself as an argument then returns a different function.

Next, the three dots mean to put the result of that function as the entire props. So in your case, it would mean to get a return value from bindLogoPos then assign it as props to the HTML div element. Think of it like passing the entire props as the sole function argument instead of destructuring the object then passing it one by one.

I hope this answers your question, and happy coding!

Jiwu Jang
  • 28
  • 4
  • Thank you so much!!! I didn't know that function can get function argument and returns a function. Also I didn't know that bindLogoPos return values can be props. It helped a lot! – Juyeon Aug 24 '22 at 12:28
  • If it worked for you, and solved your problem, please mark this answer as correct. Thanks. – Jiwu Jang Aug 24 '22 at 14:21
0

Here useDrag is a custom hook and it seems it is returning a function called bindLogoPos which when you are calling is returning div attributes in form of a json. so: const res = bindLogoPos(); // res is a json containing div attributes and then this {...res} is called destructuring.

So that how it injecting all required attributes (like draggable="true", style ...)

uditkumar01
  • 400
  • 5
  • 11
  • Thank you so much! I learned about destructing, but I had no idea that destructing can be used like this way. It helped a lot!! – Juyeon Aug 24 '22 at 12:29