How can I pass the current logged in user credentials eg the username to the props?

Question

I wish to get the username and user ID of the current logged in user and pass them to the <Comments /> component as props. Currently I have hard code the the values like this <Comments username='Vincent', user_id=1. How do I automat this process, so that the values are passed automatically depending on the current logged in user?

In my CommentsApp I have this:

... 
import Comments from './Comments'


const CommentsApp = () => {
    const [backendComments, setBackendComments] = useState([])
    // console.log('backendComments', backendComments)

    useEffect(() => {
        axios.get('http://127.0.0.1:8000/api/comments/')
            .then(res => {
                setBackendComments(res.data)
            })
            .catch(err => {
                console.log(err)
            })
    }, [])

    return (
        <div>
            <Comments user_id='1' username='Vincent' />
        </div>
    );
}

export default CommentsApp;

Answer 1

As T.J. Crowder has suggested, you could save your user's informations in React Context when he signs in. You could then access them in your CommentsApp component using the useContext hook.