Functional Component and object iteration

Question

I need help with object iteration, usually I can just loop through an array but I haven't dealt with a single object before.

In my class based component I have this

this.state = {
  itemDetails: []
};

axios.get(`${ROOT_URL}/${itemId}?${API_KEY}`).then(res => {
  console.log(res.data);
  this.setState({ itemDetails: res.data })
});

This returns JSON data that looks like

And I have an functional component looks like this

const MovieDetails = (props) => {
  const arrayofKey = Object.keys(props.itemDetails).map((r) => {
    <li
      key={r.id} >
      <a href='#t' className='rating'><i className='fas fa-star fa-fw' />{r.vote_average}</a>
      <img src={`https://image.tmdb.org/t/p/w185/${r.poster_path}`} alt={r.title} className='search-results-poster' />
      <a href='#t' className='search-results-name'>{r.name}</a>
      <a href='#t' className='search-results-title'>{r.title}</a>
    </li>
  })
  return <ul className='search-results'>{arrayofKey}</ul>
}

the error i'm currently getting is:

Expected an assignment or function call and instead saw an expression. (no-unused-expressions)

I just want to React to render the data I need, name, title etc

Try returning that JSX from the `.map` callback instead. – CertainPerformance Dec 17 '18 at 23:45 — CertainPerformance, Dec 17 '18 at 23:45

score 2 · Answer 1 · answered Dec 17 '18 at 23:46

Be careful with arrow functions. Unlike with other languages, the last expression in a code block is not automatically returned. Change

const arrayofKey = Object.keys(props.itemDetails).map((r) => {
  <li
    key={r.id} >
    <a href='#t' className='rating'><i className='fas fa-star fa-fw' />{r.vote_average}</a>
    <img src={`https://image.tmdb.org/t/p/w185/${r.poster_path}`} alt={r.title} className='search-results-poster' />
    <a href='#t' className='search-results-name'>{r.name}</a>
    <a href='#t' className='search-results-title'>{r.title}</a>
  </li>
})

...to:

const arrayofKey = Object.keys(props.itemDetails).map((r) => (
  <li
    key={r.id} >
    <a href='#t' className='rating'><i className='fas fa-star fa-fw' />{r.vote_average}</a>
    <img src={`https://image.tmdb.org/t/p/w185/${r.poster_path}`} alt={r.title} className='search-results-poster' />
    <a href='#t' className='search-results-name'>{r.name}</a>
    <a href='#t' className='search-results-title'>{r.title}</a>
  </li>
))

The second one has an expression as the right side of the arrow function. The former has a statement block which is missing a return. Alternately, you could add a return before the <li/> expression.

I get an error on line 'const arrayofKey = object....' TypeError: Cannot convert undefined or null to object — invrt, Dec 18 '18 at 00:10
@invrt: Seems unrelated to this change and rather means that `props.itemDetails` is `null` or `undefined`. — Felix Kling, Dec 18 '18 at 00:19
yeah my bad, I didn't pass props in parent component. It's working now! — invrt, Dec 18 '18 at 00:20

dwjohnston · Answer 2 · 2018-12-18T00:13:43.480

You have a small error on your map function:

.map((r) =>{
    <li
      key={r.id} >
      <a href='#t' className='rating'><i className='fas fa-star fa-fw' />{r.vote_average}</a>
      <img src={`https://image.tmdb.org/t/p/w185/${r.poster_path}`} alt={r.title} className='search-results-poster' />
      <a href='#t' className='search-results-name'>{r.name}</a>
      <a href='#t' className='search-results-title'>{r.title}</a>
    </li>
  })

Here you have declared a function (r) => { that doesn't return anything.

Instead use:

.map((r) =>(
    <li
      key={r.id} >
      <a href='#t' className='rating'><i className='fas fa-star fa-fw' />{r.vote_average}</a>
      <img src={`https://image.tmdb.org/t/p/w185/${r.poster_path}`} alt={r.title} className='search-results-poster' />
      <a href='#t' className='search-results-name'>{r.name}</a>
      <a href='#t' className='search-results-title'>{r.title}</a>
    </li>
  ))

Which is shorthand for 'and return this object'.

score 2 · Accepted Answer · answered Dec 17 '18 at 23:49

2

Change

.map((r) => { ... }) to .map((r) => ( ... ))

answered Dec 17 '18 at 23:49

varoons

3,807
1
16
20

Functional Component and object iteration

3 Answers3