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!

Answer 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 => { 

Answer 2

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 (