React pattern matching braindumb

Example.js

const test = (props) => (
	<div>
		{match(props).with(
			(String) => <div>Should work {props}</div>,
			({bar = '1', test: {x = false}}) => <div>Super cool {bar}</div>,
			({bar = '5', test: {y = true}}) => <div>Mega cool {test.y} {y}</div>,
			([a = 3, {x = 4}, z]) =>
				<nesting>
					{match(z).with(
						({bar = '5', test: {y = true}}) => 
							<div>
								Foobar {a} {test.x} {z}
							</div>
					)}
				</nesting>
			)}
	</div>
);

This should translate into something like:

function matchPattern1(props) {
   // combine checks here for this
}
function matchPattern2(props) {
   // etc. etc.
}
<div>
{ matchPattern1(props) ?
  <div />
: matchPattern2(props) ?
  <div /> 
: matchPattern3(props) ?
  (function(){
    return <div />;
  })()
: null
}
</div>

RegExp solution is ugly, not sure yet how to improve.

This should also be supported:

{foo = String, bar = Boolean})