Fork me on GitHub

Hello everyone, I'm trying to get (azure auth) to work with Reagent. How can I convert this React hook to something Reagent can understand? Is it possible? I think I have the initialization working correctly, and the Authenticated/Unauthenticated templates seem to render as expected, but I can't seem to grasp how to translate the code I have commented below into something Reagent understands (the raw React code is from the Github example I have linked above):

import React from 'react';
import { useMsalAuthentication, AuthenticatedTemplate, UnauthenticatedTemplate } from "@azure/msal-react";

export function App() {
const {login, result, error} = useMsalAuthentication("popup"); // <-- I can't seem to convert this into usable CLJS code

return (
        <p>Anyone can see this paragraph.</p>
        <p>At least one account is signed in!</p>
        <p>No users are signed in!</p>


You will have to use a function component for that. Read this section and the next one:


Thank you for pointing me in the right direction @U2FRKM4TW, I will check it out. šŸ‘

šŸ‘ 3

This new "fun comp" thing allows use of hooks

Wilson Velez20:12:55

hi, suppose I have a super small application, it is a reagent component that shows a button and send an ajax request when clicked. The question is, can I have the same application multiple times included in the same html page?

Wilson Velez20:12:51

Thanks @U2FRKM4TW, sorry, I forget to mention that reframe is also involved, my fears are because of the app-state, anyway Iā€™m going to give it a try is not that hard, I just wanted to know before


You don't really need re-frame in a "super small application with a button that sends a request". And having re-frame there complicates things. You either have to dance around your state much more or straight up resolve to iframes.


So I have this widget component which returns a function so that local state works, but when I want to problematically render several widget components in my root component I get an error "Functions are not valid as a React child" because obviously it's returning a function. I'm not sure how to fix this issue while preserving component local state in reagent.


Don't use (widget ...), use [widget ...]. Apart from that, wrap it in a call to reagent.core/as-element.


Thanks that worked, also what's the difference between calling the component with parnes vs brackets?


@mikethompson Do you remember this Appendix 2 here on [] vs () docs: This might be one of the docs copied from re-frame wiki. I think something is wrong in the example that should show some problem, it is perfectly valid code, no error there. I could just remove this, but if we can remember the original idea I could fix the example.