Anatomy of a Component

Anatomy of a DapDap Component: Basic

Borrowing from React, DapDap Components use hooks such as useState and useEffect to handle the state's logic, and props to receive parameters.

DapDap Components are stored in the NEAR blockchain, for which you will use the NEAR VM to retrieve and execute them in the browser.

Using a VM enforces components to be sandboxed, making them very secure since they cannot access your LocalStorage or other elements in the page they are incorporated to. However, because of this, components cannot import external libraries. However, they can import functions from other components.

---

State

To handle the component's state you can use useState hook. The useState hook returns a tuple of two values: the current state and a function that updates it.

const [count, setCount] = useState(0);

return (
  <div>
    <p>You clicked {count} times</p>
    <button onClick={() => setCount(count + 1)}>Click me</button>
  </div>
);

Each time a state variable is updated, the component will be re-rendered. This means that the whole code will run again.

---

Props

Each component has access to a local variable named props which holds the properties received as input when the component is composed.

return <>
  <p> This component props: {JSON.stringify(props)} </p>
  <Widget src="influencer.testnet/widget/Greeter" 
          props={{name: "Maria", amount: 2}} />
</>

---

useEffect Hook

The useEffect hook is used to handle side effects. It will execute each time one of the dependencies changes.

const [count, setCount] = useState(0);
const [visible, setVisible] = useState(false);

useEffect(() => {
  if(count > 5) setVisible(true);
}, [count]);

return (
  <div>
    <p>You clicked {count} times</p>
    <p className="alert alert-danger" hidden={!visible}>
      You clicked more than 5 times
    </p>
    <button onClick={() => setCount(count + 1)}>Click me</button>
  </div>
);  

---

Import

Components can import functions from other components. This is useful to reuse code and to create libraries of components.

const {add, multiply} = VM.require('influencer.testnet/widget/Math');

return <>
  <p> 2 + 3 = {add(2, 3)} </p>
  <p> 2 * 3 = {multiply(2, 3)} </p>
</>

Where the code of the Math component is:

function add(a, b) {
  return a + b;
}

function multiply(a, b) {
  return a * b;
}

return { add, multiply };