SPFX save array inside item response to display in render react

Question

I am facing simple issue where I need to get value of an expanded person field in react. I am receiving the title and was able to assign it to a variable, but my need is to automatically get the value assigned to the predefined interface fields just like other response values(Division and Duedate) which are not array. I tried below. Please help

ListItems:{"Assignee":[],"Division":"","DueDate":""}; //This is in the state
const AssignmentList:any = await sp.web.lists.getByTitle("AssigneeTracker").items.getById(parseInt(id)).select("Assignee/Title","Division","DueDate").expand("Assignee/Id").get();
  console.log(AssignmentList);
  var test=AssignmentList.Assignee[0].Title;
  console.log(test);//here I am receiving the value
  reactHandler.setState({ListItems:AssignmentList});

Tried Rendering as below

<div className={styles.CellStyle}> 
{this.state.ListItems.Assignee.map(assigne=>{return <li key={assigne}>{assigne}</li>})}</div> 

Below image is the response :

Answer 1

Your render method is trying to render the entire assignee {assigne}, but React doesn't know how to render that object.

Try changing your render to:

<div className={styles.CellStyle}> 
{this.state.ListItems.Assignee.map(assigne=>{return <li key={assigne["odata.id"]}>{assigne.Title}</li>})}</div>