import React from 'react'

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

export default Meal

import React from 'react'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'

const Meal = props => {
  return props.meal
    ? <div>
        <h1>Meal Card</h1>
        <h3>
          {props.meal.name}
        </h3>
        <p>
          <a target="_blank" href={props.meal.url}>
            {props.meal.url}
          </a>
        </p>
      </div>
    : null
}

const mapStateToProps = (state, ownProps) => {
  return {
    meal: state.meals.find(m => m.id === +ownProps.match.params.id),
  }
}

export default withRouter(connect(mapStateToProps)(Meal))

Connect Meal component and render markup