[REACT] Change project model at runtime

[eluce2]

How do we change the project model at runtime?

[marcio]

Hey eluce2,

Thanks for reaching out.

To change the project model at runtime in a React application, you can update the state that holds the project model. Here's a basic example:

import React, { useState } from 'react';
import { BryntumGantt } from '@bryntum/gantt';

function App() {
    const [project, setProject] = useState(initialProjectModel);

    const changeProjectModel = () => {
        const newProjectModel = createNewProjectModel(); // Your logic to create a new project model
        setProject(newProjectModel);
    };

    return (
        <div>
            <button onClick={changeProjectModel}>Change Project Model</button>
            <BryntumGantt project={project} />
        </div>
    );
}

export default App;

In this example, initialProjectModel is your initial project model, and createNewProjectModel is a function that returns a new project model. When you click the button, it updates the project model used by the BryntumGantt component.

If you're using an inline data approach, with the BryntumGanttProjectModel wrapper, you can have multiple components, where each one will have one ref, or you can use something like loadInlineData in a single component and reload the data of the ProjectModel.