provide-data

Description

Provides new data for a branch

You should call this action to provide data for a branch.

Usage

"provide-data": ({
  id: string|number,
  data: {
    tasks?: [],
    links?: []
  }
}) => boolean | void;
```

### Parameters

- `id` - (required) the ID of the task for which data should be provided
- `data` - (required) new data provided for a branch (the [tasks](/api/properties/tasks) and [links](/api/properties/links) arrays)

:::info
For handling the actions you can use the [Event Bus methods](/api/overview/methods_overview)
:::

### Example

In the example below we listen to the [`request-data`](/api/actions/request-data) action with the help of the [`api.on()`](/api/methods/on) method, fetch the tasks branch data from the server and parse to the component calling the `provide-data` action.

```jsx
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";
import { useState, useEffect, useRef } from "react";

const server = "https://some-server";

function GanttComponent() {
  const [tasks, setTasks] = useState([]);
  const [links, setLinks] = useState([]);
  const apiRef = useRef();

  useEffect(() => {
    Promise.all([
      fetch(server + "/tasks").then(res => res.json()),
      fetch(server + "/links").then(res => res.json()),
    ]).then(([t, l]) => {
      setTasks(t);
      setLinks(l);
    });
  }, []);

  const init = (api) => {
    api.on("request-data", ev => {
      Promise.all([
        fetch(server + `/tasks/${ev.id}`).then(res => res.json()),
        fetch(server + `/links/${ev.id}`).then(res => res.json()),
      ]).then(([tasks, links]) => {
        api.exec("provide-data", {
          id: ev.id,
          data: {
            tasks,
            links,
          },
        });
      });
    });
  };

  return (
    <Gantt apiRef={apiRef} init={init} tasks={tasks} links={links} />
  );
}

export default GanttComponent;
```

---

**Related articles**: [How to access Gantt API](/api/how_to_access_api)