Cannot read property ‘map’ of undefined in React

by

Provide a check for undefined prop.data and then render the component because it is possible that the props initially don’t provide the data but is available in the second render. That should solve your problem

class App extends React.Component {
  render() {
    var data = [
{"transid":3426,"acct":"acct1","category":"Auto"},
 {"transid":3427,"acct":"acct2","category":"Subscriptions"}
]
    return (
        <div ><TransactionManagerView data={data}/></div>
    )
  }

}



const TransactionManagerView = function(props) {

  console.log(props.data);

  return (
    <ul>
      {
        props.data && props.data.map(function(el,index) {
           return <li key={index}>{el.category}</li>
        })
      }
    </ul>
  )

}

ReactDOM.render(<App/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="app"></div>

More Related Contents:

  1. Dynamic tag name in React JSX
  2. What are React controlled components and uncontrolled components?
  3. react router difference between component and render
  4. forEach() in React JSX does not output any HTML
  5. Starter create-react-app with IE11 polyfill import still aborts in IE11
  6. What does the error “JSX element type ‘…’ does not have any construct or call signatures” mean?
  7. How to call stopPropagation in reactjs?
  8. Internal implementation of “makeStyles” in React Material-UI?
  9. How to combine multiple inline style objects?
  10. When do I choose React state Vs Redux Store
  11. React Js require ‘fs’
  12. Cannot use JSX unless the ‘–jsx’ flag is provided
  13. React Router not working with Github Pages
  14. React.useState does not reload state from props
  15. TypeError: evt.target is null in functional setState
  16. React Router 4 Nested Routes not rendering
  17. React router 4 does not update view on link, but does on refresh
  18. ReactJS difference between stateful and stateless
  19. Difference between @mui/material/styles and @mui/styles?
  20. React: Hide a Component on a specific Route
  21. Why useEffect doesn’t run on window.location.pathname changes?
  22. React hook rendering an extra time
  23. how to change jest mock function return value in each test?
  24. How to set build .env variables when running create-react-app build script?
  25. ReactJS – prevState in the new useState React hook?
  26. Image elements do not have explicit width and height
  27. You cannot render a inside another . You should never have more than one in your app
  28. How to go back to previous route in react-router-dom v6
  29. React – “localStorage is not defined” error showing
  30. Is it possible to return empty in react render function?

Leave a Comment