Pass data of array to react native view

Question

I have a function that fetch the data from backend and map over the data and then add them to array called events_data

function getvals() {

    return fetch('http://**********/users/timetable')
        .then((response) => response.json())
        .then((output) => {
            addData(output, events_data);
        })


        .catch(error => console.log(error))

}

function addData(data, data2) {
    data.map((d) => {
        data2.push({
            title: d.name,
            startTime: genTimeBlock(d.day, d.start_time),
            endTime: genTimeBlock(d.day, d.end_time),
            location: d.location,
            extra_descriptions: [d.extra_descriptions],
        });
    });
}

So in my app view I want to pass events_data to events props:

 <SafeAreaView style={{ flex: 1, padding: 30 }}>
     <View style={styles.container}>
       <TimeTableView
           scrollViewRef={this.scrollViewRef}
           events={// events.data will be passed here as array format //}**
           pivotTime={8}
           pivotDate={this.pivotDate}
           numberOfDays={this.numOfDays}
           onEventPress={}
           headerStyle={styles.headerStyle}
           formatDateHeader="dddd"
           locale="en"
          />
      </View>
      </SafeAreaView>

Side note: the timetable view it is a third party package that accept array passed in porp events={} and display its data in timetable format so here I want to pass events_data array coming from function addData and pass it to events prop in <TimeTableView>

@SomeoneSpecial ow to do that I'm beginner to react native. and I'm using class component. and the array is defined out side the class so how i set state to the array data from inside the class and then i can pass it to the app view easily — alobe
– alobe, Commented Jan 16, 2021 at 7:16

Someone Special · Accepted Answer · 2021-01-16 07:24:03Z

1

function getvals() {

    return fetch('http://**********/users/timetable')
        .then((response) => response.json())
        .then((output) => {
            return addData(output, events_data); //<-- add a return statement.
        })


        .catch(error => console.log(error))

}

in your class component where you are calling the get Val function.

const data = getvals();
this.setState({ events: data });

then you can use this.state.events in your table.

answered Jan 16, 2021 at 7:24

Someone Special

13.7k8 gold badges54 silver badges80 bronze badges

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

2 Comments

alobe Over a year ago

i got this error The 'const' modifier can only be used in TypeScript files. when i used const data = getvals();

Someone Special Over a year ago

function data () { }

Collectives™ on Stack Overflow

Pass data of array to react native view

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related