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();
  var test=AssignmentList.Assignee[0].Title;
  console.log(test);//here I am receiving the value

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 : Response from List

enter image description here

  • how is the interface for ListItems defined? Commented Feb 21, 2020 at 13:42
  • You can also click the link in your error message in the console to get more information. Commented Feb 21, 2020 at 13:51
  • export interface IPnPPeoplePickerState { ListItems:{"Assignee":[{"Title":""}],"Division":"","DueDate":""}; } I am trying below almost trying to ge there....<div className={styles.CellStyle}>{this.state.ListItems.Assignee.map((item,index)=>{<li>{item[0].Title}</li>})}</div>
    – ssspfx
    Commented Feb 21, 2020 at 14:09

1 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>
  • Awesome. Thank you so much. I did similar to that like below.<br>{test.length ? test : <p>test</p>}----var test=this.state.ListItems.Assignee.map((item,index)=>{return <li key={index}>{item.Title}</li>})
    – ssspfx
    Commented Feb 21, 2020 at 14:30
  • 1
    Yup the important thing to notice here is you can't render the whole Assignee item, you have to reference specific properties (like ".Title").
    – willman
    Commented Feb 21, 2020 at 14:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.