Assistance in having create post button / send message buttons not be visible to users who aren't logged in

Question

I'm currently trying to set up the create post and send message buttons only be visible if you are a logged in user, I've tried quite a few things, but I ended up having to revert to the base code I had where the buttons do function, any guidance would be greatly appreciated.

edit::: realized I posted the wrong snippet for rendering the new post button.

This is the code for new post button:

import React from 'react';
import { useState, useEffect } from 'react';
import { fetchPosts, getCurrentToken } from '../api';
import { Link } from 'react-router-dom';
import Post from './Post';
import SearchBar from './SearchBar'


const Posts = ({ setPosts, posts }) => {

    const [searchPosts, setSearchPosts] = useState([]);

    useEffect(() => {
        fetchPosts(getCurrentToken())
        .then(({data}) => {
            setPosts(data.posts)
            setSearchPosts(data.posts)
        } )
    }, [])

    
    console.log(posts);

    const onSearchPosts = (searchTerm) => {
        setSearchPosts(posts.filter((post) => {
            const postName = post.title.toLowerCase();
            return postName.includes(searchTerm.toLowerCase());
        }))
    };
    
    return ( 
        <div> 
            <h1 className="Posts">Posts</h1>
            <SearchBar onSearchPosts={onSearchPosts}/>
            <Link to='/createpost'><button className="button">New Post</button></Link>
            {searchPosts.map((post, index) => <Post key={index} post={post}></Post>)}
        </div>
    )
}

export default Posts;

Answer 1

first of all you gonna need a way to figure out if a user is logged in or not. is quite hard to figure if you all ready have that in place from just the snippet you posted here a suggestion.

see the snippet for a start.

 import React from 'react'; import { useState, useEffect } from 'react'; import { fetchPosts, getCurrentToken } from '../api'; import { Link } from 'react-router-dom'; import Post from './Post'; import SearchBar from './SearchBar' const isLoggedIn => () => { // code that determines if the user is logged in and return true or false } const Posts = ({ setPosts, posts }) => { const [searchPosts, setSearchPosts] = useState([]); useEffect(() => { fetchPosts(getCurrentToken()).then(({data}) => { setPosts(data.posts) setSearchPosts(data.posts) } ) }, []) console.log(posts); const onSearchPosts = (searchTerm) => { setSearchPosts(posts.filter((post) => { const postName = post.title.toLowerCase(); return postName.includes(searchTerm.toLowerCase()); })) }; return ( <div> <h1 className="Posts">Posts</h1> <SearchBar onSearchPosts={onSearchPosts}/> {isLoggedIn && ( <Link to='/createpost'><button className="button">New Post</button></Link> )} {searchPosts.map((post, index) => <Post key={index} post={post}></Post>)} </div> ) } export default Posts;