react nav link redirect on condition - reactjs

Question

I have two values at data index: isOnline (true and false). Right now <NavLink /> renders on both true and false, but I want to render only when value is false and not when it's true. Is there any possibility to do that?
I want to hide hyperlink if value is true. Hyperlink should only be rendered with false value. At the moment it gives me hyperlink on both true and false. But I want true value not to be linked with any other stuff but false value should be clickable.
import React, { useEffect, useState } from 'react';
import {
Tabs, Icon, Divider, Table, Button, Input, Row, Col,
} from 'antd';
import moment from 'moment';
import { NavLink, Redirect } from 'react-router-dom';
import { getAllLeads } from '../../shared/services/apiService';
import { isSuccess } from '../../shared/utils/jsHelper';
import routePaths from '../../shared/routePaths';
// rowSelection object indicates the need for row selection
const rowSelection = {
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
getCheckboxProps: (record) => ({
disabled: record.name === 'Disabled User', // Column configuration not to be checked
name: record.name,
}),
};
const dateFormat = 'YYYY-MM-DD';
const Leads = () => {
const [leadList, setLeadList] = useState([]);
const columns = [
{
title: 'Sl no.',
dataIndex: 'name',
render: (name, record) =><span>{leadList.indexOf(record) + 1}</span>
},
{
title: 'Date',
dataIndex: 'createdAt',
},
{
title: 'Name',
dataIndex: 'name',
},
{
title: 'Phone number',
dataIndex: 'phone_number',
},
{
title: 'Email id',
dataIndex: 'email',
},
{
title: 'Type',
dataIndex: 'type',
},
{
title: 'Comment',
dataIndex: 'comment',
},
{
title: 'Property name',
dataIndex: 'propertyId.name',
//render: (name, row) => {row.propertyId ? (<NavLink to={`${routePaths.PROPERTY}/${row.propertyId._id}`}>{name}</NavLink>) : null},
},
{
title:'On-Line / Off-Line',
dataIndex: 'isOnline',
// render: (isOnline, row) => {
// if(!isOnline){
// <NavLink to={`${routePaths.LEADSFORM}/${row._id}`}>
// {isOnline}
// </NavLink>
// }else{null}
// }
render: (isOnline, row) => <NavLink to={`${routePaths.LEADSFORM}/${row._id}`}>{isOnline}</NavLink>,
}
];
const [loading, setLoading] = useState(false);
var tokenSession = localStorage.getItem('token');
if(tokenSession!='undefined' && tokenSession == null){
var setTokenSession = true;
}else{
var setTokenSession = false;
}
const [loggedDashOut, setDashLoggedOut] = useState(setTokenSession? true:false);
if (loggedDashOut) {
return <Redirect to={routePaths.LOGIN} />;
}
const getLeadsList = () => {
setLoading(true);
getAllLeads().then((resp) => {
if (isSuccess(resp)) {
setLeadList(resp.data.data);
}
}).finally(() => setLoading(false));
};
useEffect(() => {
getLeadsList();
return () => {};
}, []);
return (
<Row className="row-pad">
<Col xs={24} sm={24} md={8} lg={8} xl={8}><h3>Leads</h3></Col>
<Col xs={24} sm={24} md={8} lg={8} xl={8}></Col>
<Col xs={24} sm={24} md={8} lg={8} xl={8}>
<NavLink to={routePaths.LEADSFORM}>
<Button type="primary" className="btn-add">Add Leads</Button>
</NavLink>
</Col>
<Divider />
<Table pagination={{ pageSize: 10 }} columns={columns} dataSource={leadList} />
</Row>
);
};
export default Leads;

Answer 1

I'm not sure where is your isOnline variable, but basically if you want to render something conditionally you can try:
return (
...
{isOnline ? null : <NavLink />}
...
)
This will render the <NavLink /> component only when isOnline is false.
This is not the only way to implement conditional rendering in React, just a very common one, and I think it suits your use case.
For more details you can refer to the official docs regarding conditional rendering.
Good luck!