how to implement a link in react with boolean?

[Eisbaeeer]

Hi. I´m not confirm with react. I read a tutorial and tried something, but that is more try-and-error and not realy professional. Can you give me an example how to get an HTML link to e.g. the dashboard and set a boolen in the loop() ? The link should be e.g <a href="https://www.facebook.com/device">Login with Facebook</a> an a click on the Link should set a boolen var in the code to true. Thank´s a lot!

[maakbaas]

It is a bit hacky, but I will give you a minimal example how to do this:

With the following dashboard.json

[    
    {
        "name": "dummyBool",
        "type": "bool",
        "direction": "display"
    },    
    {
        "name": "inputBool",
        "type": "bool",
        "direction": "control",
        "hidden": true
    }    
]

And using the dashboard example with the loop function modified to:

void loop() 
{
    //software interrupts
    WiFiManager.loop();
    updater.loop();
    configManager.loop();
    dash.loop();

    //your code here
    //task A
    if (taskA.previous == 0 || (millis() - taskA.previous > taskA.rate))
    {
        taskA.previous = millis();

        if (dash.data.inputBool)
            dash.data.dummyBool = true;
        else
            dash.data.dummyBool = false;
    }
}

Then modify the return of DashboardPage.js on line 79 to:

return <><h2>{loc.titleDash} {socketStatus != 0 ? socketStatus == 1 ? <Live>{loc.dashLive}</Live> : <Disconnected>{loc.dashDisconn}</Disconnected> : <Connecting>{loc.dashConn}</Connecting>}</h2><p>{form}</p>
        <p><a href="https://www.facebook.com/device" onClick={() => {
            fetch(`${props.API}/api/dash/set?start=1&length=1`, {
                method: "post",
                body: new Uint8Array([1]),
            })}}>Login with Facebook</a></p>
    </>;

This will add a link to the dashboard page that does an API request to change the hidden dashboard element inputBool to true. You will see this reflected in the dummyBool variable thanks to the function in the example loop.

The only thing you might need to modify is the ?start=1 in the API call. This should be the byte at which the bool element that you want to change starts in the dashboard structure.

[Eisbaeeer]

Thank's a lot for your example! I think I will get it running. Your framework is brilliant for such things. Have a nice day and be healthy!

[Eisbaeeer]

Got it running. Thanks a lot!