Using a select element to render a recordset (react)

[Felicity_Evans]

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 = [
  { 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 />);

[Felicity_Evans]

Replying in case someone is searching for a similar solution. I ended up using the following to create what I required:

• useState
• Select onchange event
• setting variable to be event.target.value
• when looping through recordset returning null when record value does not match stored value

Unfortunately I don’t seem to be able to limit the recordset itself aside from using an airtable view. I had no success with filterformula in the userecords() function. If someone has a more efficient way of returning one record base on user selection please add it here.