I have a const in render function like const arr = ["james","john"];
and in the return function I do
<select>
arr.map(item =>
<option>item</option>
)
</select>
What I see in the output is item, not the value of the array. Am I missing something? I want to populate the array value as options.
Content inside JSX elements will normally be interpreted as "text", so React treats arr.map(…) as the literal content of the <select> element.
(<option>item</option> is therefore simply treated as the literal child element of <select>; your browser probably ignores the surrouding text, which is why you only see "item" in your list).
When you instead want it to be treated as a JavaScript expression, simply wrap it in curly brackets (as explain in the "Introducing JSX" page of React's quick start guide):
<select>
{arr.map(item =>
<option>{item}</option>
)}
</select>
