Get data from active directory using react and ASP.NET core

See more:

ReactJS

ASP.NET-Core

, +

Can someone share code to retrieve user details along with thumbnail image to be displayed basis the input username. This has to be accomplished using asp.net core and react. I am pretty new to this technology, please help.

What I have tried:

in controller:

public Image ourTeam()
{
    var userDetails = db.users.Where(x=>x.saMAccountName == "someUsername").FirstOrDefault();
    
    Image image = GetImage(userDetails.CN); //I get image data

    var stream = new System.IO.MemoryStream();

    if (image != null)
        image.Save(stream, ImageFormat.Jpeg);
    
    return image;
}

Component code:

import * as React from 'react';
import { RouteComponentProps } from 'react-router';

interface FetchImageDataState {
    imageList: ImageData[];
    loading: boolean;
}

export class OurTeam extends React.Component<routecomponentprops<{}>, FetchImageDataState> {
    constructor() {
        super();
        this.state = { imageList: [], loading: true }; //initialize to default

        fetch('api/Home/ourTeam')
            .then(response => response.json() as Promise<imagedata[]>)
            .then(data => {
                this.setState({ imageList: data, loading: false });
            });
    }

    public render() {        
        let contents = this.state.loading
            ? <p>Loading...</p>
            : this.renderImageTable(this.state.imageList);
        return <div>
            <h1>Team</h1>
            {contents}
        </div>;
    }

    private renderImageTable(imageList: ImageData[]) {
        return <div>{
            imageList.map(x =>
                )
        }</div>;        
    }
}

export class ImageData {
    CN: string = "";
    byteData: string = "";
}