I have a schema that includes a radio selection:
export default {
name: 'exhibitions',
title: 'Exhibitions',
type: 'document',
fields: [
{
name: 'exhibition_name',
title: 'Name of Gallery',
type: 'string',
},
{
name: 'exhibition_image',
title: 'Exhibition Image',
type: 'image',
},
{
name: 'exhibition_status',
title: 'Exhibition Status',
type: 'string',
options: {
list: [
{title: 'Past', value: 'past'},
{title: 'Current', value: 'current'},
{title: 'Future', value: 'future'}
],
layout: 'radio',
}
},
]
}
I want to make it so that my React app only shows posts that have selected the 'current' value in the radio selection. For example, I have three posts in my Sanity, 1 that has selected 'current', and 2 that have selected 'past'- I only want to fetch the name and image of the one that picked current, not all three of them. I've tried a couple things, but I don't know the best way to achieve this. Here is what I have so far:
import React, { useState, useEffect} from 'react'
import './exhibitions.css'
import { useNavigate, Routes, Route } from "react-router-dom";
import Past from './past'
import Exhibitions from './current'
import Future from './future'
import sanityClient from "../client";
import imageUrlBuilder from '@sanity/image-url'
export default function CurrentExhibitions() {
// links between past, current, and future pages
const navigate = useNavigate();
const navigatePast = () => {
navigate('/past');
};
const navigateCurrent = () => {
navigate('/current');
};
const navigateFuture = () => {
navigate('/future');
};
// fetches image url
const builder = imageUrlBuilder(sanityClient)
function urlFor(source) {
return builder.image(source)
}
// fetches sanity data
const [exhibitionData, setExhibitionData] = useState(null);
useEffect(() => {
sanityClient.fetch(
`*[_type=="exhibitions"]{
exhibition_name,
exhibition_image{
asset->{
_id,
url
}
},
exhibition_status
}`)
.then((data) => setExhibitionData(data))
.catch(err => console.error(err));
}, [] );
return (
<main className="main-exhibitions">
<div className="title">
<div className="title-line-left"></div>
<h2>exhibitions</h2>
<div className="title-line-right"></div>
</div>
<div className="exhibitions-navbar">
<span className="nav-past" onClick={navigatePast}>past</span>
<span className="nav-current" onClick={navigateCurrent}>current</span>
<span className="nav-future" onClick={navigateFuture}>future</span>
<Routes>
<Route element={<Past />} path='/past' />
<Route element={<Exhibitions />} path='/current' />
<Route element={<Future />} path='/future' />
</Routes>
</div>
{exhibitionData && exhibitionData.map((exhibitions, index) => (
<div className="ex-current">
<img src={urlFor(exhibitions.exhibition_image).url()} alt={exhibitions.exhibition_alt} />
</div>
))}
</main>
)
}