diff --git a/source/engine/mecanismViews/Somme.js b/source/engine/mecanismViews/Somme.js
new file mode 100644
index 000000000..7c973e39a
--- /dev/null
+++ b/source/engine/mecanismViews/Somme.js
@@ -0,0 +1,50 @@
+import React, { Component } from "react"
+import {makeJsx} from '../evaluation'
+import {path} from 'ramda'
+import {Node, NodeValue} from '../traverse-common-jsx'
+
+
+export default class Somme extends Component {
+	render() {
+		let {explanation, nodeValue} = this.props
+		return <Node
+			classes="mecanism somme"
+			name="somme"
+			value={nodeValue}
+			child={
+				this.renderTable(explanation)
+			}
+		/>
+	}
+	renderTable = explanation => (
+		<table>
+			<caption />
+			<tbody>
+				{explanation.map((v, i) => {
+					let rowFormula = path(["explanation", "formule", "explanation"], v),
+						isSomme = rowFormula && rowFormula.name == "somme"
+
+					return [
+						<tr key={v.name} className={isSomme ? "" : "noNest"}>
+							<td className="operator blank">{i != 0 && "+"}</td>
+							<td className="element">{makeJsx(v)}</td>
+							<td className="situationValue value">
+								<NodeValue data={v.nodeValue} />
+							</td>
+						</tr>,
+						...(isSomme
+							? [
+								<tr className="nested">
+									<td className="blank" />
+									<td className="nested">
+										{this.renderTable(rowFormula.explanation)}
+									</td>
+								</tr>
+							]
+							: [])
+					]
+				})}
+			</tbody>
+		</table>
+	)
+}
diff --git a/source/engine/mecanisms.js b/source/engine/mecanisms.js
index c4b5de7df..b3001e797 100644
--- a/source/engine/mecanisms.js
+++ b/source/engine/mecanisms.js
@@ -8,6 +8,7 @@ import {findRuleByName} from './rules'
 import 'react-virtualized/styles.css'
 import {Table, Column} from 'react-virtualized'
 import taux_versement_transport from 'Règles/rémunération-travail/cotisations/ok/liste-taux.json'
+import Somme from './mecanismViews/Somme'
 
 let constantNode = constant => ({nodeValue: constant, jsx:  nodeValue => <span className="value">{nodeValue}</span>})
 
@@ -315,45 +316,10 @@ export let mecanismSum = (recurse,k,v) => {
 
 	let evaluate = evaluateArray(R.add,0)
 
-	let renderTable = explanation => <table>
-		<caption />
-		<tbody>
-			{explanation.map((v, i) => {
-				let rowFormula = R.path(['explanation', 'formule', 'explanation'], v),
-					isSomme = rowFormula && rowFormula.name == 'somme'
-
-				return [<tr key={v.name} className={isSomme ? '': 'noNest'}>
-					<td className="operator blank">{i != 0 && '+'}</td>
-					<td className="element">
-						{makeJsx(v)}
-					</td>
-					<td className="situationValue value">
-						<NodeValue data={v.nodeValue} />
-					</td>
-				</tr>,
-				... isSomme ? [ <tr className="nested">
-					<td className="blank" />
-					<td className="nested">{renderTable(rowFormula.explanation)}</td>
-				</tr>] : []]
-			})}
-		</tbody>
-	</table>
-
-	let jsx = (nodeValue, explanation) => (
-		<Node
-			classes="mecanism somme"
-			name="somme"
-			value={nodeValue}
-			child={
-				renderTable(explanation)
-			}
-		/>
-	)
-
 
 	return {
 		evaluate,
-		jsx,
+		jsx: (nodeValue, explanation) => <Somme nodeValue={nodeValue} explanation={explanation} />,
 		explanation,
 		category: 'mecanism',
 		name: 'somme',