0

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

enter image description here

3
  • how is the interface for ListItems defined? – Rune Sperre Feb 21 '20 at 13:42
  • You can also click the link in your error message in the console to get more information. – Rune Sperre Feb 21 '20 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 Feb 21 '20 at 14:09
3

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>
2
  • 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 Feb 21 '20 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 Feb 21 '20 at 14:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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