CODEWITHSUNDEEP
javascriptreactjsreact-native
fun joker
fun joker

Reputation: 1727

How can I display data using sectionList in react native?

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:

enter image description here

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:

enter image description here

Upvotes: 2

Views: 1123

Answers (1)

Blue
Blue

Reputation: 22911

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

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

Upvotes: 1

Related Questions