Требуется разъяснение по синтаксису React JSX

Question

Я учусь кодировать в React и немного путаюсь с синтаксисом JSX.

Я пытался понять, но снова и снова путался. Будет лучше, если кто-нибудь объяснит мне, что именно происходит здесь с этим кодом и в чем проблема.

Здесь я пытаюсь перебрать массив элементов формы с кодом ниже:

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 1

JSX выражение:

{<div>some html tag with one root tags. wrapping brackets { and } </div>}

JSX означает JavaScript XML. говорит, что вы можете написать HTML в вашем файле JavaScript.
Функция стрелки:

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;

Свыше randomFunc1, randomFunc2, randomFunc3 делает то же самое, что и один. randomFunc3 - самый короткий синтаксис.
Ваш код в порядке. но функция map должна возвращать оператор для создания нового массива. так что просто нужно ключевое слово return перед тегом <Input>

Answer 2

при использовании функции со стрелкой может выдавать ключевое слово return, если вы не открываете / закрываете скобки.

чтобы исправить, удалите { и } из функции стрелок

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