ES6 array map doesn't return anything: ReactJS

Question

I have an array and i have a simple string value. I want to mapping my array because i'm try to find my string value.

I have a code like this, but map function doesn't return anything :/

class Application extends React.Component {
  constructor(){
    super();

    this.state = {
      questionAnswer: 'is that possible',
      question: ['is', 'possible', 'that']
    }  
  }

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

  render() {
    return (
      <div>
        <div>blabla</div>
        {this.renderKeywords()}  
      </div>
   );
 }
}
React.render(<Application />, document.getElementById('app'));

Possible duplicate of Deep nested array of objects not rendering — Shubham Khatri
– Shubham Khatri, Commented Aug 14, 2017 at 8:50

Mayank Shukla · Accepted Answer · 2017-08-14 10:57:31Z

16

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

edited Aug 14, 2017 at 10:57

answered Aug 14, 2017 at 8:27

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

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

Comments

hannad rehman · Accepted Answer · 2017-08-14 09:01:18Z

0

you should return the map function itself, and you can achieve it with es6 single line arrow functions too

class Application extends React.Component {
  constructor(){
    super();

    this.state = {
      questionAnswer: 'is that possible',
      question: ['is', 'possible', 'that']
    }  
  }

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

  render() {
    return (
      <div>
        <div>blabla</div>
        {this.renderKeywords()}  
      </div>
   );
 }
}
React.render(<Application />, document.getElementById('app'));

answered Aug 14, 2017 at 9:01

hannad rehman

4,4215 gold badges39 silver badges60 bronze badges

2 Comments

Marek Takac Over a year ago

Your answer doesn't bring anything new to the question and is basically just repeating already accepted answer...

hannad rehman Over a year ago

i have updated the es6 arrow function which is the actual implementation of it when you are directly returning something from it. @MarekTakac

Collectives™ on Stack Overflow

ES6 array map doesn't return anything: ReactJS

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related