AD (Azure Directory) group object not showing anything in react but it shows up in the console React/Spfx

Question

I'm trying to display my ad group, a single object, the first value in my ad group. The code below seems to be working and I'm able to log the object console.log(res); and sure enough I do get the object and its properties logged in the console. The problem is that it does not show anything on my browser. It's just white and I don't see my <h1>{() => {return groups.displayName}}</h1> showing up anywhere. Any help on this matter would be appreciated

Interface

export interface IUserItem {
    displayName: string,
    description?: string,
}

const EmployeeList = (props: IEmployeeListProps) => {

  const [groups, setGroups] = useState<IUserItem>();

  useEffect(() => {
    props.context.msGraphClientFactory
      .getClient("3")
      .then((client: MSGraphClientV3) => {
        client
          .api("/groups/02c1fcf9-3708-4fad-a44d-1dc5de69abd9")
          .version("v1.0")
          .select("")
          .get((err: any, res: any) => {
            if (err) {
              console.error("MSGraphAPI Error")
              console.error(err);
              return;
            }
            console.log(res);
            setGroups(res.value);
          }).catch((e) => { console.log(e) });
      }).catch((e) => { console.log(e) })
  }, []);



  return (
    <div onLoad={() => console.log("Page has been loaded")} style={{ textAlign: "center" }}>
        <div>
          <h1>{() => {return groups.displayName}}</h1>  
        </div>      
    </div>
  );
}

export default EmployeeList

EDIT Screenshot of the console log: https://www.dropbox.com/s/pw5da9lxtb4hok7/object%20log.png?dl=0

UPDATE/SOLUTION: I was trying to set my groups object to the res.value instead of the res object. The solution was just to change setGroups(res.value); to setGroups(res);

Can you please show some output that is coming to the console — Ahmad Faraz, Oct 07 '22 at 07:10
Sure, the object log is quite long with a lot of attributes and unnecessary odata, so it's not really formatted on stack. I took a screenshot of the log though and dropped it in my dropbox. Here is the log https://www.dropbox.com/s/pw5da9lxtb4hok7/object%20log.png?dl=0 — liondepierre, Oct 07 '22 at 07:26
that's mean which are showing me object, you are setting this state like `setGroups(res.value);` because you consoling only `console.log(res);` res value, and you are setting the `res.value` in `setGroup`. Are you sure you are entering the exact data in the setGroup state? — Ahmad Faraz, Oct 07 '22 at 07:38
Argh, yes. That's true because it's an object that I am setting in my setState I need to set it to the ``` res ``` object and not the ``` res.value ``` object property. I've changed the ```setGroups(res.value);``` to ```setGroups(res);```. That did the job, Thanks!. — liondepierre, Oct 07 '22 at 07:43

score 0 · Answer 1 · answered Oct 07 '22 at 07:29

0

<h1>{() => {return groups.displayName}}</h1>

should be

<h1>{groups?.displayName}</h1>

answered Oct 07 '22 at 07:29

Nikolay

10,752
2
23
51

Hey Nikolay, I've tried that too but to no avail unfortunately. It still shows up in the console but not on the site itself – liondepierre Oct 07 '22 at 07:33

score -1 · Answer 2 · answered Oct 07 '22 at 07:18

-1

I'm not pretty sure but seems like you try to render groups.displayName before it is defined.

try using it with optional chaining

<h1>{() => {return groups?.displayName}}</h1>

answered Oct 07 '22 at 07:18

Ahmet Ulutaş

187
7

I've tried your solution and it's not changing the outcome. It's still showing a blank site and with the object being logged in the console. Also should the object not already be defined as I set the state inside the useEffect, which in practise is run after the first render? – liondepierre Oct 07 '22 at 07:29

AD (Azure Directory) group object not showing anything in react but it shows up in the console React/Spfx

2 Answers2