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 :

You can also click the link in your error message in the console to get more information. — Rune Sperre
– Rune Sperre, 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
– ssspfx, Commented Feb 21, 2020 at 14:09

willman · Accepted Answer · 2020-02-21 14:34:24Z

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>

edited Feb 21, 2020 at 14:34

answered Feb 21, 2020 at 14:18

willman

3,7241 gold badge15 silver badges25 bronze badges

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
– ssspfx

2020-02-21 14:30:43 +00:00
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
– willman

2020-02-21 14:33:10 +00:00
Commented Feb 21, 2020 at 14:33

Add a comment |

Stack Exchange Network

SPFX save array inside item response to display in render react

1 Answer 1

Your Answer

Hot Network Questions

SPFX save array inside item response to display in render react

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions