S
Solara

general

I m not sure what you mean but changing

Mmariobuikhuizen8/3/2023
I'm not exactly sure what you mean, but changing the value from the backend would look something like this:
import solara
import ipyreact

class AppInit(ipyreact.ReactWidget):
_esm = """
// import confetti from "canvas-confetti";
import * as React from "react";

export default function({value, set_value, debug}) {

React.useEffect(() => {
console.log('App init');
//set_value('xyz ' + value);
}, []);


React.useEffect(() => {
console.log(`value changed to ${value}`);
}, [value]);

return <h1>{value}</h1>
};"""


contexts = {}

@solara.component
def Page():
count, set_count = solara.use_state(0)

with solara.v.Sheet():
with solara.Div():
AppInit.element(value=count, on_value=print)
solara.Button(f"inc {count}", on_click=lambda: set_count(count + 1), color="primary")


Page()
import solara
import ipyreact

class AppInit(ipyreact.ReactWidget):
_esm = """
// import confetti from "canvas-confetti";
import * as React from "react";

export default function({value, set_value, debug}) {

React.useEffect(() => {
console.log('App init');
//set_value('xyz ' + value);
}, []);


React.useEffect(() => {
console.log(`value changed to ${value}`);
}, [value]);

return <h1>{value}</h1>
};"""


contexts = {}

@solara.component
def Page():
count, set_count = solara.use_state(0)

with solara.v.Sheet():
with solara.Div():
AppInit.element(value=count, on_value=print)
solara.Button(f"inc {count}", on_click=lambda: set_count(count + 1), color="primary")


Page()
And bi-directional would look like this:
import solara
import ipyreact

class AppInit(ipyreact.ReactWidget):
_esm = """
// import confetti from "canvas-confetti";
import * as React from "react";

export default function({value, set_value, debug}) {

React.useEffect(() => {
console.log('App init');
//set_value('xyz ' + value);
}, []);


React.useEffect(() => {
console.log(`value changed to ${value}`);
}, [value]);

return <div>
<button onClick={() => set_value(value+1)}>inc from frontend</button>
<h1>{value}</h1>
</div>
};"""


contexts = {}

@solara.component
def Page():
count, set_count = solara.use_state(0)

with solara.v.Sheet():
with solara.Div():
AppInit.element(value=count, on_value=set_count)
solara.Button(f"inc {count}", on_click=lambda: set_count(count + 1), color="primary")


Page()
import solara
import ipyreact

class AppInit(ipyreact.ReactWidget):
_esm = """
// import confetti from "canvas-confetti";
import * as React from "react";

export default function({value, set_value, debug}) {

React.useEffect(() => {
console.log('App init');
//set_value('xyz ' + value);
}, []);


React.useEffect(() => {
console.log(`value changed to ${value}`);
}, [value]);

return <div>
<button onClick={() => set_value(value+1)}>inc from frontend</button>
<h1>{value}</h1>
</div>
};"""


contexts = {}

@solara.component
def Page():
count, set_count = solara.use_state(0)

with solara.v.Sheet():
with solara.Div():
AppInit.element(value=count, on_value=set_count)
solara.Button(f"inc {count}", on_click=lambda: set_count(count + 1), color="primary")


Page()

Looking for more? Join the community!