` elements, each with list items sharing the same set of keys.
```python
from reactpy.core.elements import html
data_1 = [
{"id": 1, "text": "Something"},
{"id": 2, "text": "Something else"},
]
data_2 = [
{"id": 1, "text": "Another thing"},
{"id": 2, "text": "Yet another thing"},
]
html.section(
html.ul([html.li(data["text"], key=data["id"]) for data in data_1]),
html.ul([html.li(data["text"], key=data["id"]) for data in data_2]),
)
```
--------------------------------
### Respond to Button Click Event in ReactPy
Source: https://github.com/reactive-python/reactpy/blob/main/docs/source/guides/adding-interactivity/index.rst
This example demonstrates how to attach an event handler to a button in ReactPy. When the button is clicked, a synchronous function is executed to print a message to the console. This showcases basic event binding and the use of closures to access component scope.
```python
from reactpy import html, run
def button_prints_message():
def handle_event(event):
print("button clicked!")
return html.button({"on_click": handle_event}, "Click Me")
run(button_prints_message())
```
--------------------------------
### JavaScript Build Configuration (Rollup)
Source: https://github.com/reactive-python/reactpy/blob/main/docs/source/guides/escape-hatches/distributing-javascript.rst
Defines the input, output, and plugins for the Rollup build process. It specifies the entry point, the output file path within the Python package, the output format as ES Module, and includes plugins for module resolution, CommonJS compatibility, and environment variable replacement.
```javascript
export default {
input: "src/index.js",
output: {
file: "../your_python_package/bundle.js",
format: "esm",
},
plugins: [
resolve(),
commonjs(),
replace({
"process.env.NODE_ENV": JSON.stringify("production"),
}),
]
};
```
--------------------------------
### Loading JavaScript Modules in ReactPy
Source: https://github.com/reactive-python/reactpy/blob/main/docs/source/guides/escape-hatches/distributing-javascript.rst
Demonstrates how to load a bundled JavaScript module into a Python application using ReactPy. It shows how to create a web module from a file and then export specific components from that module for use in Python.
```python
from pathlib import Path
import reactpy
_BUNDLE_PATH = Path(__file__).parent / "bundle.js"
_WEB_MODULE = reactpy.web.module_from_file(
# Note that this is the same name from package.json - this must be globally
# unique since it must share a namespace with all other javascript packages.
name="YOUR-PACKAGE-NAME",
file=_BUNDLE_PATH,
# What to temporarily display while the module is being loaded
fallback="Loading...",
)
# Your module must provide a named export for YourFirstComponent
YourFirstComponent = reactpy.web.export(_WEB_MODULE, "YourFirstComponent")
# It's possible to export multiple components at once
YourSecondComponent, YourThirdComponent = reactpy.web.export(
_WEB_MODULE, ["YourSecondComponent", "YourThirdComponent"]
)
```
--------------------------------
### Adding State Variable in ReactPy
Source: https://github.com/reactive-python/reactpy/blob/main/docs/source/guides/adding-interactivity/components-with-state/index.rst
This code snippet demonstrates how to add a state variable to a ReactPy component. It shows the initialization of the state and how it can be updated, typically in response to user interactions like button clicks. The example focuses on managing an index for displaying sequential data.
```python
from pynecone.components.tags import Tag
from pynecone.vars import Var
def add_state_variable():
return Tag.create(
"",
{
"child": "Click me!",
"on_click": "setState({'count': count + 1})"
}
)
# Assume 'count' is a state variable initialized elsewhere
# Example usage:
# count = Var.create(0)
# button = add_state_variable()
```
--------------------------------
### Render data-driven list with keys in ReactPy
Source: https://github.com/reactive-python/reactpy/blob/main/docs/source/guides/creating-interfaces/index.rst
Shows how to render dynamic lists of UI elements based on data collections in ReactPy. It highlights the importance of using 'keys' for proper organization and efficient updates when dealing with sorted or filtered data.
```python
from reactpy import component, html
from typing import List, Dict
@component
def TodoListWithKeys(todos: List[Dict[str, str]]):
return html.ul(
# Items must be identified with unique keys!
[html.li(todo["text"]) for todo in todos]
)
defApp():
return html.div(
html.h1("My Todo List with Keys"),
TodoListWithKeys(todos=[
{"text": "Design a cool new app", "key": "0"},
{"text": "Build it", "key": "1"},
{"text": "Share it with the world!", "key": "2"}
])
)
```