const LinkList = () => {
const [links, setLinks] = useState([]);
const url = 'http://localhost:5000/xyz';
const hook = () => {
console.log('effect');
axios
.get(url)
.then(response => {
if (response.data.message === 'No links found') {
setLinks(null);
} else {
setLinks(response.data.links);
}
})
.catch(err => console.log("couldn't fetch data", err))
}
useEffect(hook, []);
return(
<div>
{links ? (
<>
<p className=''> link list page </p>
<ul>
{
links.map((link, index) => <li key={index}> {link.link} </li>)
}
</ul>
</>
) : (
<p> No links were found. </p>
)}
</div>
)
}
I want the above component to render a different message, based on the response from the api being called. For example, if the api returns: {'message': 'No links found'}, then I don't want to render the ul tag with links but want to render a p tag with a message saying that no links were found.
How can I make this happen?