How can I display data using sectionList in react native?

Question

I want to display data using section List in react native. I am extracting data using reduce() but I am not able to understand why I am getting undefined behaviour saying please provide html or uri as prop for react native render html.

I want to display sectionList items as HTML content and title of SectionList is the title from specificationsData.

const specificationsData = specifications.reduce( (acc, curValue) => {

            if (curValue.title !== undefined && curValue.description !== undefined){

                let newObj = {};

                newObj['data'] = curValue.description;

                newObj['title'] = curValue.title;

                console.log(curValue.title)

                acc.push(newObj);

                return acc;
            }

        }, []);

        console.log(specificationsData)

Result of above log:

Now I pass above data into SectionList:

import HTMLView from 'react-native-render-html';

<SectionList
                    renderItem={({item, index, section}) => <HTMLView key={index} value={item}/>}
                    renderSectionHeader={({section: {title}}) => (
                        <Text style={{fontWeight: 'bold', color: 'red'}}>{title}</Text>
                    )}
                    sections={specificationsData}
                    keyExtractor={(item, index) => item + index}
                />

How can I pass display data and title of sectionList by passing specificationsData ?

See screenshot of above code:

Post the result from these changes, as I think your issue most likely has something to do with ({section: {title}}). — Blue
– Blue, Commented Oct 20, 2018 at 17:49
@FrankerZ See screenshot -> imgur.com/a/eRxb63f this code -> <Text style={{fontWeight: 'bold', color: 'red'}}>{title}</Text> is perfect I think there is some issue with HTMLView — fun joker
– fun joker, Commented Oct 20, 2018 at 18:02

Blue · Accepted Answer · 2018-10-20 18:04:56Z

1

According to the SectionList documentation, data needs to be an array within your specificationsData. Update the following line:

newObj['data'] = [curValue.description];

answered Oct 20, 2018 at 18:04

Blue

23k7 gold badges69 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I display data using sectionList in react native?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related