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.
Source: stackoverflow.com
Related Query
- Async Data load with react redux persist
- Async data flow in React App with Redux + ReactRouter?
- Async Image Load with React and Redux
- redux react strategy with async data and interaction
- How to make a react component with Async data re-usable in Redux flow?
- React and redux usage with async data fetching
- Load data from Redux store to React state with Thunk
- Get async data with react redux probem
- Cannot read property '.then' of undefined when testing async action creators with redux and react
- Redux in React Native app is very slow with lots of data
- Dynamically load redux reducers with react router 4
- React Hook useEffect : fetch data using axios with async await .api calling continuous the same api
- React Select with Async - Failing to load options
- React Redux with redux-observable use the router to navigate to a different page after async action complete
- How do I load inital set of data with ajax call in React redux?
- Content doesn't change when back/forward made on browser with state data in React + Redux
- React Redux connected component with async action testing
- React hook form with redux and async request
- Unable to display data in component with react and redux
- SSR React with data for redux store
- React Redux dispatch payload reaches case with data but doesnt save it
- Use data from async function on React State with JSX
- Staying DRY with Async Calls in React Redux Application With Redux Thunk
- React Router and Redux - Data on initial load
- react redux async load FB javascript sdk
- Redux Persist not persisting state with async reducers
- Share API data with other components by using React Hook, NO REDUX
- React Router Link with params not reloading page with new data from componentDidMount and Redux axios data fetching
- React Redux - load response data before render
- React redux frontend not fetching data from Django API with axios
More Query from same tag
- How to disable Submit button outside the Antd Form when the fields are invalid?
- How to access table cell data in react
- How to make android app fullscreen with ionic-react?
- I want to save all Button values in array using ReactJs
- React Hook Form Controller
- Particle JS show stars only inside one div
- React set scroll position before component mount
- Using thunks in mapDispatchToProps
- Authentication logic for sessions that last while tab is open
- How to create dynamic (conditional) placeholder in React.js
- Calling functions in render method
- Environment variable undefined error in node.js
- How to create a nested react componet?
- React-router v6 Route composition. Is it possible to render a custom Route?
- ApolloClient all values result to null when performing a mutation
- What does the comment /** @jsx jsx */ do in the Emotion CSS-in-JS library?
- How to use one vendor chunk file (webpack) for multiple react projects
- Why is mapStateToProps not being called
- TypeError: can't define property "current": Object is not extensible
- React prop is undefined
- React with Antd Component Modal Form with state issue
- How to add a callback and a function at the same time in a single onClick in React?
- Why when I call axios through a function is it not updated?
- Change value on dynamic input fields in reactjs
- How to test whether component contains string?
- filtering through array of strings doesn't include the first character
- React Router Dom v5 : regex path of a GUID / UUID is not recognised
- How to bind 3 inputs values?
- What is best option to guard your routes in React?
- React Select doesn't update value on clicking option