I have a question which hope you might be able to help me with.

If I was to create a custom class class 'SPList', and on my componentDidMount function or the constructor. I was to call a REST operation, to retrieve me the first 5 list items, i would be able to do that quite easily.

I could output all the list item information from inside the SPList class' render method, by using the map function. So I understand doing it that way.

What I would quite like to know, is if I wanted to add a function to my SPList class called 'DeleteItem(index: number)' - this would need to have stored the JSON result from the REST call into a custom object such as 'SPListItem'. This way SPList can hold an array of these objects, to be able to perform the DeleteItem on.

But if I was to do that, inside the SPList class render function I would then need to explicitaly call the Render method for each SPListItem within the array. It starts to get pretty messy.

I was wondering what is the best approach to the above scenatio? Any help, as always is greatly appreciated.

Many Thanks,


I'll let others comment on react specifics, but in general you want to separate your data from your rendering. So rather than having List have a bunch of data and a render method, which then calls render on each ListItem contained within it, which then examines its own data, it would be better to have a separate render implementation where the data (in this case SPList, containing SPListItems) is passed in. The render method can then examine the data, traverse it as necessary, and render appropriately.

This also allows you to have alternate renderers (say mobile vs. web) and creates a nice separation of data vs display.

| improve this answer | |

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.