React map function not rendering

Question

I have a map function that is returning results in the console, however it's not rendering in the DOM.

Here is my map function:

const featuredMakes = makes.filter(makes => makes.featured === true);
    var featured = Object.keys(featuredMakes).map(function(s){ 
        console.log(featuredMakes[s].title);  
        return (
            <Col className="mb-3">
                <Link
                    key={featuredMakes[s].title}
                    href={{ pathname: '/deal-list', query: query }}
                    as={{ pathname: '/filter', query: query }}
                    passHref
                >
                    <a>
                        <img
                            style={{ height: '80px', width: '80px' }}
                            src={featuredMakes[s].logo}
                            alt={featuredMakes[s].title + ' logo'}
                        />
                    </a>
                </Link>
            </Col>
        );
    });

And here is what's in my render call:

<Row>{this.renderFeaturedMakes(makes)}</Row>

The console is showing me everything correctly, however nothing is showing in the DOM. I am still learning React and ES2016. Any insight is helpful and appreciated!

are you returning featured variable from renderFeaturedMakes function — Shubham Khatri
– Shubham Khatri, Commented Nov 14, 2018 at 13:22
Sorry renderFeaturedMakes is the name of my function from the first code block. featuredMakes is returning the markup for each object. — Lz430
– Lz430, Commented Nov 14, 2018 at 13:26

t.kuriyama · Accepted Answer · 2018-11-14 15:07:09Z

1

The solution to show them on the browser is to add return statement in renderFeaturedMakes method. Otherwise this method doesn't return nothing.

And if you want to write them in ES2016, it might help you.

const featuredMakes = makes.filter(makes => makes.featured === true);
const featured = Object.keys(featuredMakes).map(s => (
    <Col className="mb-3">
        <Link
            key={featuredMakes[s].title}
            href={{ pathname: '/deal-list', query: query }}
            as={{ pathname: '/filter', query: query }}
            passHref
        >
            <a>
                <img
                    style={{ height: '80px', width: '80px' }}
                    src={featuredMakes[s].logo}
                    alt={featuredMakes[s].title + ' logo'}
                />
            </a>
        </Link>
    </Col>
));
return featured;

// or just return instead of inserting `featured` variable
// return Object.keys(featuredMakes).map(s => {

answered Nov 14, 2018 at 15:07

t.kuriyama

1775 bronze badges

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

1 Comment

Lz430 Over a year ago

Much cleaner. Thank you!

Lz430 · Accepted Answer · 2018-11-14 14:22:51Z

0

I ended up getting it. I was returning from a var, when I needed to return directly. Line 2 from above:

return Object.keys(featuredMakes).map(function(s){ 
        // console.log(featuredMakes[s]);  
        return (

answered Nov 14, 2018 at 14:22

Lz430

3272 gold badges7 silver badges17 bronze badges

Collectives™ on Stack Overflow

React map function not rendering

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related