import React from 'react'

const Meal = props => {
  return (
    <div>
      <h1>Meal Card</h1>
      <h3>
        {props.meal.name}
      </h3>
    </div>
  )
}

export default Meal

@@ -18,16 +18,100 @@
  'react'
+%0Aimport %7B connect %7D from 'react-redux'%0Aimport %7B withRouter %7D from 'react-router-dom'
 %0A%0Aconst 
@@ -141,20 +141,33 @@
 urn 
-(
+props.meal
 %0A   
+ ?
  %3Cdiv%3E%0A
+  
     
@@ -193,16 +193,18 @@
 %3E%0A      
+  
 %3Ch3%3E%0A   
@@ -208,16 +208,18 @@
         
+ 
+ 
 %7Bprops.m
@@ -234,16 +234,18 @@
 %7D%0A      
+  
 %3C/h3%3E%0A  
@@ -250,38 +250,340 @@
     
-%3C/div%3E%0A  )%0A%7D%0A%0Aexport default 
+    %3Cp%3E%0A          %3Ca target=%22_blank%22 href=%7Bprops.meal.url%7D%3E%0A            %7Bprops.meal.url%7D%0A          %3C/a%3E%0A        %3C/p%3E%0A      %3C/div%3E%0A    : null%0A%7D%0A%0Aconst mapStateToProps = (state, ownProps) =%3E %7B%0A  return %7B%0A    meal: state.meals.find(m =%3E m.id === +ownProps.match.params.id),%0A  %7D%0A%7D%0A%0Aexport default withRouter(connect(mapStateToProps)(
 Meal
+))
 %0A

Connect Meal component and render markup