score:2

here is how i usually use react. if i have a component that i want to pull data, i set up an app-level state variable (array) to hold that data. then i have an app level function that updates that array based on a passed array (using setstate()). then when i invoke the component, i send it the app-level array as well as that app-level function. inside the subcomponent, i get the data into a local array, then i call the passed function with that array. in my render code of the subcomponent i refer to array passed from the app-level (not the local array i populated).

(note: in the pseudo code below, i use ... to indicate your existing code would go here, or other code, etc)

app level

    state = {showquestions: []}
    ...
    updatequestions = (newquestions) => {
        this.setstate({showquestions: newquestions})
    }
    ...
    // then when you render (i'll assume the name of your component 
    // is questions)
    <questions 
        questiondata={this.state.showquestions}
        updatefunc={this.updatequestions}
    />

sub-component file (inside the code you have above)

...
componentdidmount() {
    // use your code above, i'm assuming you are putting data 
    // into the questions array
    ...
    // after you've got the questions array all set up with all data
    this.props.updatefunc(questions)
    ...
}
...
// now down in the render of your questions component
render() {
    return(
        ...
        this.props.questiondata.map(... <your other code))
        ...
}

as a side note, in the react code i use i do not do a constructor function. the this.props. syntax is available without doing that. so maybe i am in a different version of react than you are. also i'm not familiar with the <'row'> element you show in your render(). therefore, i do not know if those things mean my examples above would function as expected or not. i recommend sprinkling console.log() statements around so you can see what data is passed where, etc. good luck.


Related Query

More Query from same tag