Changing HTML tag with Props in React JS

Question

I want to display my custom Tire element or simple div (depending on media queries) with different values on each call. But the ternary operator doesn't work (always displays Tire element, never div) and I'm getting "undefined" instead of string "1" that should be it's content.

Would anyone be so kind as to explain where I went wrong?

const Content = () => {
  const isDesktop = window.matchMedia('(min-width: 110em)')

  const displayTire = (props) => (isDesktop.matches
    ? <Tire className={`${props.title}`}>{`${props.content}`}</Tire>
    : <div className={`${props.title}`}>{`${props.content}`}</div>)

  displayTire.propTypes = {
    title: PropTypes.string.isRequired,
    content: PropTypes.string.isRequired
  }

  return (
        {displayTire('pneu1', '1')}
  )

export default Content

Answer 1

You're not actually providing a title and content to the props of displayTire.

To do that, you should have done:

  return (
        {displayTire({ title: 'pneu1', content: '1'})}
  )