REACT using MAP or forEach doesn't show nothing

Question

I'm new with React and I'm here asking for help. The render method won't render anything, no error, nothing to see where I mess up. I'm sure "recetas" has an array of items in there because I check it, but the map doesn't go through the array and I don't understand why. I know what maybe it's because of the "await" and "async" in the function but that shouldn't be a problem. I'm sure the solution is very easy but I can't see it!

import React from 'react';

export default class Favoritas extends React.Component{
  state = {
    recetas: []
  }

  async componentDidMount() {
     const req= await fetch('https://scrap-cook-servicio-web.herokuapp.com/recetas');
     const res= await req.json();
     this.setState({recetas: res.message});  
 }

  render() {
    return(
      <div>
        {this.state.recetas.map((receta, i) => {
            <div className="mt-5 max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
              <div className="md:flex">
                <div className="md:flex-shrink-0">
                  <img className="h-48 w-full object-cover md:w-48" src="/favicon.ico" alt="Man looking at item at a store"/>
                </div>
                <div className="p-8">
                  <div className="uppercase tracking-wide text-sm text-indigo-500 font-semibold">TYPE</div>
                  <a href="#" className="block mt-1 text-lg leading-tight font-medium text-black hover:underline">TITLE</a>
                  <p className="mt-2 text-gray-500">DESCRIPTION</p>
                </div>
              </div>
            </div>
        })
        }
      </div>
    )
  }
}

I hope you can help me and I'll appreciate any help!

You're not returning anything from your map callback function — Nick
– Nick, Commented Jul 2, 2021 at 2:31
Javier do {this.state.recetas.map((receta, i) => ( Difference is using ( instead of { this would return your markup in itself or add return statement {this.state.recetas.map((receta, i) => { return ( <div className="mt — Alwaysblue
– Alwaysblue, Commented Jul 2, 2021 at 2:36

jrnxf · Accepted Answer · 2021-07-02 03:12:50Z

1

Your map function is a JSX block that is not being returned. You have two options of doing this.

render() {
    return(
      <div>
        {this.state.recetas.map((receta, i) => (
            <div key={receta.id}>...</div>
          ))
        }
      </div>
    )
  }

or

render() {
    return(
      <div>
        {this.state.recetas.map((receta, i) => {
            return (
              <div key={receta.id}>...</div>
            )
          })}
      </div>
    )
  }

Just make sure your JSX has a unique key wrapped around the outer element. I'm making an assumption here that each receta has an id, so you may need to update this on your end.

edited Jul 2, 2021 at 3:12

answered Jul 2, 2021 at 2:44

jrnxf

1,01412 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

REACT using MAP or forEach doesn't show nothing

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related