# Contexts Added to XHP

DevFeed: [Contexts Added to XHP](<https://devfeed.tech/articles/contexts-added-to-xhp-22042.md>)

Original publisher: [Read original article](<https://codebeforethehorse.tumblr.com/post/82745109442>)

Author: Codebeforethehorse

Published: 2014-04-15T01:25:00Z

Content type: tutorial

Language: en

Sources: [Stefan Parker](<https://devfeed.tech/sources/stefan-parker.md>)

Topics: [context](<https://devfeed.tech/topics/context.md>), [data](<https://devfeed.tech/topics/data.md>)

Tags: [component](<https://devfeed.tech/tags/component.md>), [context](<https://devfeed.tech/tags/context.md>), [examples](<https://devfeed.tech/tags/examples.md>), [feature](<https://devfeed.tech/tags/feature.md>), [implementation](<https://devfeed.tech/tags/implementation.md>), [xhp](<https://devfeed.tech/tags/xhp.md>)

## AI overview

The article introduces a new XHP feature for passing context--map-like key/value data--from a parent element through a rendered component hierarchy. It explains how this can avoid manually forwarding attributes through intermediate components, using a blog comments example with different behavior for permalink and feed views. It also notes that context becomes available during rendering and supports defaults and retrieving all available contexts.

## Source excerpt

I just added a new feature to XHP to allow you pass data automatically through the hierarchy of an XHP tree being rendered. That's kind of a mouthful, but what it means is that you can set context (which is just a map of key/value pairs) on some parent element, and that context will be available on all rendered elements and their children. Let's take a look at some examples to better understand where this would be useful. Let's say you have a comment section on your blog. When you are on a permalink you want the comments to be expanded, but on the feed view you only want the counts exposed with an input field. You could create an attribute to pass your view into the component and it would work just fine. The problem lies in how you're going to get that attribute all the way into your comment component. Your comments might reside inside a feedback form (which also holds likes and shares), which itself resides in a blog post, which might reside within a blog post list, which resides within your main column content. Only your comment component needs that "page type" attribute, but now you're going to have to add it to each one of these parent components to pass it down the tree. Bummer. Context to the rescue! Think of XHP contexts as arbitrary attributes that get automatically forwarded to rendered components and children. You can set a value at the page-level (or any root element for that matter) and every element inside that tree will have access to the value. Let's look at an implementation of our blog comments example above. class :blog:comments extends :x:element { attribute array<Comment> comments = array(); protected function render() { $comments = $this->getAttribute('comments'); $commentsXHP = <x:frag />; if ($this->getContext('pagetype') == 'permalink') { foreach ($comments as $comment) { $commentsXHP->appendChild( <blog:single-comment comment={$comment} /> ); } } else { $count = count($comments); $commentsXHP->appendChild( $count.' comment'.($count != 1 ? 's