Ad group object not showing anything in react but it shows up in the console React/Spfx-CodePudding

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 onl oad={() => 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 log.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);

CodePudding user response：

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

should be

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

CodePudding user response：

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>