CODEWITHSUNDEEP
javascriptreactjsreact-nativejsx
Ted
Ted

Reputation: 3875

How to console.log() this function?

I'd like to generate JSX for React-Native, yet I do want to examine each key/value using console.log().

what I am after:

{Object.keys(this.state.types).map((obj) => (
          console.log(obj); <-- This guy
          <Item label={obj[TYPE]} value={obj[ID]} />
          ))}

But an Error is thrown "Unexpected token"

How can I still debug my values inside map?

Upvotes: 5

Views: 7131

Answers (2)

Gal Zohar
Gal Zohar

Reputation: 198

You can use the comma operator:

 {Object.keys(this.state.types).map((obj) => (
      console.log(obj), <-- This guy
      <Item label={obj[TYPE]} value={obj[ID]} />
      ))}

Which evaluates the statement and then discards it, or you can use the || operator which will evaluate console.log which returns false and then will return the React element:

 {Object.keys(this.state.types).map((obj) => console.log(obj) || (

      <Item label={obj[TYPE]} value={obj[ID]} />
      ))}

However, both are fairly hacky, I recommend you turn your arrow function into a multi-line arrow and just use return:

 {Object.keys(this.state.types).map((obj) => { 
      console.log(obj);
      return <Item label={obj[TYPE]} value={obj[ID]} />
  })}

On a side note - don't forget to set the key property on your objects returned from an array or you'll get a performance slowdown and a warning (you're currently not doing this).

Upvotes: 15

Ori Drori
Ori Drori

Reputation: 191976

The round brackets in => ( tell the function that it's returning an object (JSX is transpiled into a JS object). You want a function body to run console.log(), and then return the <Item> element.

Convert the round brackets to curly ones, and add a return statement:

{Object.keys(this.state.types).map((obj) => {
  console.log(obj); <-- This guy
  return (
    <Item label={obj[TYPE]} value={obj[ID]} />
  );
})}

Upvotes: 5

Related Questions