React: how to return a table with a button, when the value of the .map function matches a string value

Question

I have a SPARQL query that holds certain properties. i want to return a table with these properties to which i can add a hyperlink to each value to redirect to a certain page. In particular, I want to do this when the value from the .map function matches the string "http://linkedbuildingdata.net/ifc/resources20201208_005325/". This is my code down below.

const QueryTable = ({guidList}) => {
    const { context, setContext } = useContext(AppContext); 
    const isString ='https://LINKEDBUILDINGDATA.NET/IFC/RESOURCES20201208_005325/CPASensor_11NR008TE_001CPA'
    return (
        <div>
            QueryTable 
            <tbody>
            {guidList && guidList.length > 0 && guidList.map((myguids, key) => {
                console.log(myguids, key)
                return [(
                    <React.Fragment>
                            <tr key={key}>
                                <td>property: <Button>{myguids.guid}</Button></td>
                            </tr>
                    </React.Fragment>
                )]
            })}
            </tbody>
        </div>
        )
}

export default QueryTable

this is what it looks like when i console log the items.

Answer 1

Try with:

guidList && guidList.length > 0 && guidList.map((myguids, key) => {
    return (
        <tr key={key}>
            <td>property: {myguids.guid === isString ? <Button>{myguids.guid}</Button> : myguids.guid}</td>
        </tr>
    );
});