Tag Display

Tag display and interaction

Each tag will need to call an onclick function to delete itself, and the "add tag" tag needs its own onclick to add a new tag. Since the tags are displayed by their parent, the TileControl component, it also needs to know that a tag has been added or removed. I suggest accomplishing this by having the TileControl component maintain its current list of Tags as part of its state, and having the onclick for the tile call a function in the TileControl component. See notes from the lecture on Wds 5/3.

The general idea is that the React code will handle the changes to the display as tags are added and removed, and then send AJAX requests to the server to trigger corresponding changes in the database. Here are various hints that might help.

The contents of a React component can be given as an array of elements, rather than as a comma-separated sequence of elements. So, for instance, we can create an array of Tag components for each of the tags, and then use that array as the contents of the TileControl component. It might be helpful to read the "Lists and Keys" section in the React documentation.

Create a new AddTag component.

Read at least the sections on "Components and Props" and "State and Lifecycle" in the React documentation.

You'll have to pass the functions in TileControl that remove or add tags into the Tags and AddTag, as props.

Default behavior (for HTML in general, not just React) is that when you click on an element inside another element, for example a button inside of a div, and they both have onclicks, both onclicks get called. We don't want the ImageTile's onclick to get called every time the user clicks a Tag. Calling the click event's stopPropagation function prevents the parent's onclick from being called.


function tagOnclick (e) {
            e.stopPropagation();} // don't call all ancestor onClicks

You can use flexbox to layout the tags within each TileControl div, and the gallery itself on the Web page. Like an image, the gallery needs to be contained in a div, say with id "galleryContainer", that controls its width. The CSS could then be:


div#galleryContainer {
    width: 100%;
}

div#react {
}

The server has to respond to the AJAX requests, but in this case the browser does not have to do anything in the callbacks for the AJAX requests; the necessary changes to the display have already happened.