CODEWITHSUNDEEP
reactjsjsx
rhodes
rhodes

Reputation: 179

Map function with no return in React

In one of my react apps I have to loop through an array. 

function ActionTags({tags}) {
    let thisTagsHtml = (tags);
    //thisTagsHTML is a simple string, separated by ##  
    //string1##string2##string3##string4
    let tagsArray = thisTagsHtml.split('##');
    console.log(tagsArray);
    return (
        <div>
            {tagsArray.map(function(item, i){
                <span key = {i}>{item}</span>
            })}
        </div>
    );
}

This looks pretty simple. However, nothing is returned from the function. Any idea where my mistake is? Thank you.

Upvotes: 0

Views: 534

Answers (1)

SALEH
SALEH

Reputation: 1562

you missed return keyword before the statement <span key = {i}>{item}</span>

Like this :

function ActionTags({tags}) {
    let thisTagsHtml = (tags);
    //thisTagsHTML is a simple string, separated by ##  
    //string1##string2##string3##string4
    let tagsArray = thisTagsHtml.split('##');
    console.log(tagsArray);
    return (<div>
    {
        tagsArray.map(function(item, i) {
           return <span key={i}>{item}</span>
        });
    }
    </div>);
}

Upvotes: 1

Related Questions