So, I have a JSON file that has info I'm pulling into my React project. One of those fields is an image keyword. I want to use that to call images in a "show" folder where promo images can be dumped.
thisYear.json
{
"title": "Rope",
"author": "Patrick Hamilton",
"image": "rope",
},{
"title": "I Hate Hamlet",
"author": "Paul Rudnick",
"image": "iHateHamlet",
}
]
I made a query that is grabbing the images from said "show" folder to the jsx file
{
allFile(filter: {relativeDirectory: {eq: "shows"}}) {
edges {
node {
id
name
childImageSharp {
gatsbyImageData(placeholder: DOMINANT_COLOR)
}
}
}
}
}
I've tried to write some functions that compare the name properties, but I just can't seem to write anything that works. I'm not grasping something here and I just don't know what it is.
The showImage is passed in while I'm mapping through my JSON file and comparing with imageData, which is the query data. The console log is showing the right names being compared, so I know it's passing through. it's just not passing that data to the GatsbyImage.
function findImage(showImage) {
imageData.map((image) => {
console.log(image.node.name + ' vs ' + showImage)
if (image.node.name == showImage) {
/**if the image name == our show image name, we return that image data */
return data.file.childImageSharp.gatsbyImageData
}
})
return
}
My git repository is here if it helps: https://github.com/TheComeBackGuy/TKD-Gatsby
Well, I figured out what I was doing wrong. I wasn't returning the answer to the root of the function. I'm sure a more experienced person could write it cleaner, but here's what I used.
export default function FindImage(queryArray, showImage) {
let returnStatement = null
queryArray.map((images) => {
if (images.node.name == showImage) {
console.log(showImage + ' vs ' + images.node.name)
console.log(images.node.childImageSharp.gatsbyImageData)
returnStatement = images.node.childImageSharp.gatsbyImageData
}
})
return returnStatement
}