How to show linked records?

[Edmunds_Priede]

how can i show linked records for a selected table record that changes dynamicly when i select/deselect rows?

i can get selected row ids from cursor, but i am struggling to to select and show linked recods

[Kamille_Parks]

const field = table.getFieldByNameIfExists("Name of linked field")
const linkedRecords = record.selectLinkedrecordsFromCell(field)
return (<RecordCardList records={linkedRecords} />)

Airtable

Airtable | Everyone's app platform

Airtable is a low-code platform for building collaborative apps. Customize your workflow, collaborate, and achieve ambitious outcomes. Get started for free.

[Kamille_Parks]

Sorry, I thought you said you had that part figured out. There are examples of how to load data from the selected record in the Airtable Blocks SDK.

const [selectedRecordId, setSelectedRecordId] = useState(null);

const cursor = useCursor();

useWatchable(cursor, ['selectedRecordIds'], () => {
   if (cursor.selectedRecordIds.length > 0) {
      setSelectedRecordId(cursor.selectedRecordIds[0]);
   }
});

const selectedRecord = useRecordById(table, selectedRecordId ? selectedRecordId : null );

^ this will work for the first of selected records. If you want to return the record model for all selected records you’d use a regular table query and filter for records with an ID in the selected array,

[Edmunds_Priede]

Uncaught TypeError: (0 , _ui.useState) is not a function

now i get this. looks like useState is not in API docs :frowning:

[Edmunds_Priede]

i have now this code

   const selectedRecord = useRecordById(tableCustomers, selectedRecordId ? selectedRecordId : 'recSlhi5qVG6mNLdQ');
    
   const linkedRecords = selectedRecord.selectLinkedRecordsFromCell(fieldRP); 
  
   console.log('selected')
   console.log(selectedRecord)
   console.log('linked')
   console.log(linkedRecords[0])

selectedRecord is changing as expected, but linkedRecords is empty all the time.

no errors thrown

full code

import {initializeBlock, RecordCard,RecordCardList, useBase, useRecords,useRecordById,useCursor, useWatchable ,useLoadable , Box} from "@airtable/blocks/ui";
import React, { useState } from 'react';

function HelloWorldApp() {
    // YOUR CODE GOES HERE
    return <div>Hello world ...🚀</div>;
}


var contactsLinked;



const RecordCardExample = (linked, id) => {
 
 // if (typeof id == 'string') {
	  
//	  return <p> {id} </p>
 // }
  
     const base = useBase();
  
  
  
     const tableCustomers = base.getTableByName("Customers");
     const tableContacts = base.getTableByName("Contacts");
     const fieldRP = tableCustomers.getFieldByName('Contacts');
  
  
     const fieldPosition = tableContacts.getFieldByName('Position');
     const fieldResponsibleperson = tableContacts.getFieldByName('Responsible person');
  
   
     const [selectedRecordId, setSelectedRecordId] = useState(null);

     const cursor = useCursor();

     useWatchable(cursor, ['selectedRecordIds'], () => {
        if (cursor.selectedRecordIds.length > 0) {
            setSelectedRecordId(cursor.selectedRecordIds[0]);
        }  else  { setSelectedRecordId('recSlhi5qVG6mNLdQ')  }
     });

     const selectedRecord = useRecordById(tableCustomers, selectedRecordId ? selectedRecordId : 'recSlhi5qVG6mNLdQ');
    
     const linkedRecords = selectedRecord.selectLinkedRecordsFromCell(fieldRP); 
  
     console.log('selected')
     console.log(selectedRecord)
     console.log('linked')
     console.log(linkedRecords[0])
	  
 
     //return  <RecordCard record={linkedRecords[0]} /> 
  
 
	 return <p> </p>
 
};




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

[Kamille_Parks · Accepted solution]

useState() isn’t in the Airtable APi docs because its a part of regular ol’ React, and not unique to Airtable.

You may have to do

const linkedRecords = useRecords(record.selectLinkedRecordsFromCell(field))