Gatsby JS show data from pages generated from CSV

Question

I am creating pages from a csv file in Gatsby JS. So far so good. When trying to output the data onto those generated pages, something always is undefined and I just can't figure out how to get it to work.

With markdown or other sources I get it to work just fine but somehow I am stuck here. I tried modifying all kinds of other blog templates to get my data in but to no avail :/

This is what I got in my template:

import React from "react"

class ProductTemplate extends React.Component {
  render() {
        const data = this.props.productsCsv
    return (
      <div>
        <h1>{data.name}</h1>
      </div>
    )
  }
}

export default ProductTemplate


export const SingleProductQuery = graphql`
   query ProductByPath($slug: String!) {
      productsCsv(slug: {eq: $slug}) {
            name
            price
            image
          }
        }
`;

any ideas or pointers would be much appreciated :)

Answer 1

Seems like I forgot a "data" in the render function. Working fine now. Just in case anybody has the same issue, here the code I got it working with:

import React from 'react';

class ProductTemplate extends React.Component {
    render() {
        const post = this.props.data.productsCsv
  return (
        <div>
        <h1>{post.name}</h1>
        <img src={post.image} />
        </div>
  );
}
};

export default ProductTemplate;

export const singleQuery = graphql`
   query ProductBySlug($slug: String!) {
      productsCsv( slug: { eq: $slug }) {
            name
            price
            image
          }
        }
`;