Hopefully someone can help.

I’m using the airtable API to build a custom app. I want to have a record picker which displays a selection of records, upon selecting the record the resulting report (data based on selection) is rendered.

I’ve been playing around and I’m fairly certain “SelectSynced” is going to be my friend. However I’m struggling with a lack of worked code examples (they mostly show table or view selections).

Namely; I would like to

a) render a < select> populated with data from a record query

b) once user has made a selection use the select value to render data from the chosen record

Link to api ref for react component: Airtable Blocks SDK

//WIP - hard -coded values for testing

import {

useRecords, 

useBase,

useGlobalConfig,

initializeBlock,

Select,

SelectSynced,

} from '@airtable/blocks/ui';

import React, {useState} from 'react';



const GlobalConfigKeys = {

    selectedOption: "Joseph Lee"

};



//coachnames

const options = t

  { value: "Pear", label: "Pear" },

  { value: "Joseph Lee", label: "Joseph Lee" },

  { value: "Banana", label: "Banana" }

];



const selectSyncedExample = (

  <SelectSynced options={options} globalConfigKey="selectedOption" width="320px" />

);







 function GetRecords() {

 const base = useBase();





 const table = base.getTableByName('Coaches');

 const view = table.getView('Competencies');



 let records;



 //sorting and filtering

 const opts = {

    filterByFormula: "NOT({Assessment - competencies} = '')",

    sorts: 


        // sort by someField in ascending order...

        {field: 'Name'},

    ]

};

 // Returns all records in a table, sorting the records by values in the specified fields

 records = useRecords(table, opts);



 



 return (



    <div>



    <SelectSynced options={options} globalConfigKey="selectedOption" width="320px" />



    {console.log(SelectSynced.SelectOptionValue)}



     <ul>

         {records.map(record => {



            const competencies = record.getCellValue('Assessment - competencies');

            const coachNameOfRecord = record.getCellValue('Name');



            

            

            //don't return records for coaches without competencies - filtering not working

            if (competencies === null) {

                return null;

            }

            if (coachNameOfRecord !== 'Joseph Lee'){

                return null;

            }

             return (

                <li key={record.id}>{record.name}</li>

            );

         })}

     </ul>



    </div>

 );



 }





 initializeBlock(() => <GetRecords />);