Map function with no return in React

Question

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.

Julien TASSIN · Accepted Answer · 2018-05-01 14:16:12Z

1

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>);
}

edited May 1, 2018 at 14:16

Julien TASSIN

5,2522 gold badges27 silver badges41 bronze badges

answered May 1, 2018 at 8:45

SALEH

1,5521 gold badge14 silver badges22 bronze badges

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

Collectives™ on Stack Overflow

Map function with no return in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related