SansTern.jsx

const API = ({ match, data }) => {
  // this i left as is
  const { params: { mod, header, environment } } = match;
  const doc = data.api.find(doc => mod === doc.title.slug);
  // don't mind the tern here as much, maybe would split the find to its own `validDocHeaderMatch`
  const validHeader = doc && (header ? !!doc.headers.find(h => h.slug === header) : true );
  
  // this is my 😍 for conditional JSX thus far
  return <Block>
    {!doc && <Redirect to={`/${environment}`}/>}
    {(doc && !validHeader) && <Redirect to={`/${enviroment}/api/${mod}`}/>}
    {(doc && validHeader) && <MarkdownViewer html={doc.markup}/>}
  </Block>;
};

line 12: sometimes when the values are null, this resolves to 0 and displays in the UI as 0