Clarification needed on React's JSX syntax - reactjs

Question

I am learning to code in React and bit confused with JSX syntax.
I tried to understand but getting confused again and again.
It will be better if someone explains to me what exactly happening here with this code and what is the problem.
Here I am trying to iterate over form element array with below code:
const form = formElementArray.map(element =>{
<Input
key = {element.id}
elementType={element.config.elementType}
elementConfig={element.config.elementConfig}
value={element.config.value}
inValid = {!element.config.valid}
touched = {element.config.touched}
changed={(event)=>this.onChangeHandler(event,element.id)}
shouldValidate={element.config.validation}>
</Input>
})
Error: Expected an assignment or function call and instead saw an expression.

Answer 1

when using arrow function can emit the return keyword when you don't provide open/close brackets.
to fix remove { and } from your arrow function
const form = formElementArray.map(element =>
<Input
key = {element.id}
elementType={element.config.elementType}
elementConfig={element.config.elementConfig}
value={element.config.value}
inValid = {!element.config.valid}
touched = {element.config.touched}
changed={(event)=>this.onChangeHandler(event,element.id)}
shouldValidate={element.config.validation}>
</Input>
)

Answer 2

JSX expression:
{<div>some html tag with one root tags. wrapping brackets { and } </div>}
JSX means JavaScript XML. that says, you can write html in your JavaScript file.
Arrow function:
const randomFunc1 = (param) => {
var data = 'some data' + param;
return data;
}
OR
const randomFunc2 = param => {
var data = 'some data' + param;
return data;
}
OR
const randomFunc3 = param => 'some data' + param;
Above randomFunc1, randomFunc2, randomFunc3 doing same as one. randomFunc3 is the shortest syntax.
Your code is ok. but map function needs to return statement to create a new array. so just need a return keyword before <Input> tag