Using the Python Transcrypt Transpiler for Front-end Coding/

...

/

Adding More Functionality

Adding More Functionality

Create and use an edit function in React using Python.

We'll cover the following...

Now that we can add and remove items from our list, let’s also add the ability to edit items in the list. Here’s the updated code to do so.

# Load React and ReactDOM JavaScript libraries into local namespace
React = require('react')
ReactDOM = require('react-dom')

# Map React javaScript objects to Python identifiers
createElement = React.createElement
useState = React.useState


def render(root_component, props, container):
    def main():
        ReactDOM.render(
            React.createElement(root_component, props),
            document.getElementById(container)
        )

    document.addEventListener('DOMContentLoaded', main)


# JavaScript function mappings
alert = window.alert
Adding editable list items

Handling edits

To handle edits, we reuse the text input box we already have. To do this, we need a way of knowing whether we are adding a new value to the list or editing an existing value. To accomplish this, we created a new state variable editItem at line 5 that is either an empty string or holds the original value of the item being edited. This allows us to do two things. First, when we submit the form if the value is an empty string, then we know we need to add a value. Second, if there is a non-empty value, we use that original value to look up which list item needs to be changed.

Python’s ternary expression

In line 52 ...