Javascript React：如果.map方法的输出与某个值匹配，如何呈现某个组件

我有以下情况。其中我有两个组件，一个是Querytable（父）组件，另一个是MyPop（子）组件。目前，下面querytable组件中的.map方法在仪表板中返回以下值，这些值是用蓝色块定义的。我想在MyPop组件中插入一个函数，如果BotContainesElement url与查询表匹配，我将在其中呈现一个名为TileLine的新组件

另一方面，如果.map方法中的值与以下链接匹配。然后MyPop应该呈现一个TileBar组件。如果显示任何其他链接，则它不应渲染任何内容

const QueryTable = ({guidList}) => {
 const { context, setContext } = useContext(AppContext);        
   return (
      <div>
      
   QueryTable 
    <tbody>
    {guidList && guidList.length > 0 && guidList.map((myguids, key) => {
        const url = myguids.p
        var arr = url.split('/')[3];
        return (
            <tr key={key}>
                 <td>{arr}: {myguids.guid.includes('http://linkedbuildingdata.net/ifc/resources20201208_005325/') ? <MyPopUp myproperties={guidList} myguidnames={myguids.guid}>{myguids.guid}</MyPopUp> : myguids.guid}</td>
            </tr>
        )
        })}
    </tbody>
</div>

constquerytable=（{guidList}）=>{
const{context，setContext}=useContext（AppContext）；
返回(
查询表
{guidList&&guidList.length>0&&guidList.map（（myguids，key）=>{
constURL=myguids.p
var arr=url.split（'/'）[3]；
返回(
{arr}:{myguids.guid.includes（'http://linkedbuildingdata.net/ifc/resources20201208_005325/'）？{myguids.guid}:myguids.guid}
)
})}

这是MyPop组件：

const MyPopUp = ({myguidnames, myproperties}) => {
const [open, setOpen] = useState(false)
const { context, setContext } = useContext(AppContext);
    console.log("myguidnames",myguidnames)
    console.log("myproperties",myproperties)


  // TODO: Check if the value coming from myguidnames or myproperties matches a URL containing either a 
  // /TemperatureSensor_11NR008TE_001TRL or OccupancySensor_11NR008LT_001PIRTM  
  // if so render for the Temperature sensor the TileLine Component else if render the TileBar component  else render null. 


  // const Names = myguidnames && myguidnames.length > 0 && myguidnames.map((names, i) => {
  //     console.log(names, i)})

   const roomName = myproperties.map((name, i) => {
   // return <Header key={i}>{name.guid[3]}</Header>
   // return( console.log(name.guid))})

   const names = <p>{myguidnames}</p>

   return (
  <Modal
   onClose={()=> setOpen(false)}
   onOpen={()=> setOpen(true)}
   open={open}
   trigger={<Button>{names}</Button>}
    >
    <Modal.Header>You Just Opened up the {names} sensor</Modal.Header>
    <Modal.Content image>
        <Image size='medium' src='https://images.unsplash.com/photo-1603694681044-e71c5993d6cd?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80' wrapped/>
        <Modal.Description>
            <Header>My {roomName} Sensor Data </Header>
            {/* {names.includes('http://linkedbuildingdata.net/ifc/resources20201208_005325/TemperatureSensor_11NR008TE_001TRL') ? <TileLine/> : <TileBar/>} */}
                <TileBar>
                </TileBar>
            <p> some information can be displayed here</p>
        </Modal.Description>
    </Modal.Content>
    <Modal.Actions>
        <Button color='teal' onClick={()=> setOpen(false)}>Close</Button>
    </Modal.Actions>
</Modal>
export default MyPopUp 

constmypopup=（{myguidnames，myproperties}）=>{
const[open，setOpen]=useState（false）
const{context，setContext}=useContext（AppContext）；
log（“myguidnames”，myguidnames）
log（“myproperties”，myproperties）
//TODO:检查来自myguidnames或myproperties的值是否与包含
///温度传感器\u 11NR008TE\u 001TRL或职业传感器\u 11NR008LT\u 001PIRTM
//如果是，则为温度传感器渲染TileLine组件else如果渲染TileBar组件else渲染null。
//const Names=myguidnames&&myguidnames.length>0&&myguidnames.map（（name，i）=>{
//console.log（名称，i）}）
const roomName=myproperties.map（（名称，i）=>{
//返回{name.guid[3]}
//返回（console.log（name.guid））}）
常量名称={myguidnames}

返回(
setOpen（false）}
onOpen={（）=>setOpen（true）}
open={open}
触发器={{names}}
>
你刚刚打开了{names}传感器
我的{roomName}传感器数据
{/*{names.includes（'http://linkedbuildingdata.net/ifc/resources20201208_005325/TemperatureSensor_11NR008TE_001TRL') ?  : } */}
这里可以显示一些信息

setOpen（false）}>Close
导出默认MyPopUp