how to properly match and display certain records in react

The Code below successfully display records from Atlassian Jira API and its working fine.

Here is my Issue:

I want to display only records that belongs to creator with creator id 100xx.

That is to say I want to display records where value of

search_creator_id matched with creator_id in the records

Below is my coding efforts so far

//import goes here

  const fetchData = async () => {


// make api call
//const data = await storage.query().where('key', startsWith('my_keys')).getMany();
//console.log(`display record data: ${data}`);
//return data;


//or

const search_creator_id = '100xx';

const records = [
  {
    fullname: 'James Cool',
    email: 'james@gmail.com',
    creator_id: '100xx'
  },
  {
    fullname: 'Richard More',
    email: 'richard@gmail.com',
creator_id: '200xx'
  },

  fullname: 'Ann Carrots',
    email: 'ann@gmail.com',
creator_id: '100xx'
  },



];

 
 };
 
 
const App = () => {

const [ records ] = useState(fetchData);
fetchData();


  return (
    <Fragment>
    <Heading size="medium">Display Records owned  by 100xx</Heading>
          
<Table>
    <Head>
      <Cell>
        <Text>Fullname</Text>
      </Cell>
      <Cell>
        <Text>Email</Text>
      </Cell>

  <Cell>
        <Text>owCreator</Text>
      </Cell>

    </Head>
    {records.map(record => (
      <Row>
        <Cell>
          <Text>{record.fullname}</Text>
        </Cell>
        <Cell>
          <Text>{record.email}</Text>
        </Cell>
<Cell>
          <Text>{record.creator_id}</Text>
        </Cell>
        
        
      </Row>
    ))}
  </Table>

    </Fragment>
  );
};


export const run = render(
  <Macro
    app={<App />}
  />
);

Answer

Use filter to filter the result. So Try this:

 {records.filter((x) => x.creator_id == search_creator_id).map(record => (
      <Row>
        <Cell>
          <Text>{record.fullname}</Text>
        </Cell>
        <Cell>
          <Text>{record.email}</Text>
        </Cell>
<Cell>
          <Text>{record.creator_id}</Text>
        </Cell>
        
        
      </Row>
    ))}