ES6 array map doesn’t return anything: ReactJS

by

Because you are not returning anything from renderKeywords method, you are returning from map body only. If you don’t return anything from function then by default it will return undefined, you need to return the result of map (array of elements).

Like this:

renderKeywords() {
    return this.state.question.map((item, key) => {   //here
        return (
            <span key={key}> {item} </span>
        );
    }); 
}

In short you can write it like this:

renderKeywords() {
   return this.state.question.map((item, key) => <span key={key}> {item} </span> ); 
}

Suggestion:

Assign unique key to each element.

Check this answer for more details about key: Understanding unique keys for array children in React.js

More Related Contents:

  1. setState doesn’t update the state immediately
  2. How to update nested state properties in React
  3. What do multiple arrow functions mean in JavaScript?
  4. Arrow function without curly braces
  5. How to scroll to an element?
  6. Why shouldn’t JSX props use arrow functions or bind?
  7. React Native: require() with Dynamic String?
  8. Concatenating variables and strings in React
  9. React functional stateless component, PureComponent, Component; what are the differences and when should we use what?
  10. What is the difference between using constructor vs state = {} to declare state in react component?
  11. Can I use arrow function in constructor of a react component?
  12. Active link with React-Router?
  13. setState() inside of componentDidUpdate()
  14. Arrow functions and the use of parentheses () or {} or ({})
  15. Why do I have to .bind(this) for methods defined in React component class, but not in regular ES6 class
  16. Why React Hook useState uses const and not let
  17. where is create-react-app webpack config and files?
  18. What does calling super() in a React constructor do?
  19. Best way to polyfill ES6 features in React app that uses create-react-app
  20. Importing multiple files in react
  21. ES6 functions, arrow functions and ‘this’ in an ES6 class [duplicate]
  22. React.createClass vs. ES6 arrow function
  23. How do you import a javascript package from a cdn/script tag in React?
  24. React.js ES6 avoid binding ‘this’ to every method
  25. What do curly braces mean in JSX (React)?
  26. map function not working in React
  27. React functional component default props vs default parameters
  28. React cannot read property map of undefined
  29. Deep nested array of objects not rendering
  30. import * as React from ‘react’; vs import React from ‘react’;

Leave a Comment