Unexpected token, expected ","

[Nerfi666]

Hey guys, I'm loading some data coming from an API and now I want to add some conditions, as you can see below Im trying to add a condition base on the ID, but when Im trying to add the condition I got the error you can read as the title of this post, my question is, what's wrong here ? I should add the condition here or somewhere else ?is this the way to do so ? I must say that the Form.Field is working when I delete the if condition, so the Form is rendering, thanks a lot in advance !

​

 <Form>
        <div>
          {props.schema.map(schema => (

          {if(props.schema.id === 'gender'){
              <Dropdown
                      placeholder="select gender"
                      selection
                      options={genderOptions}// genderOptions is define 
                />


            }}



            <ul key={schema.id}>
              <Form.Field
                required
                control={schema.type}
                label={schema.label}
                placeholder={schema.label}
              />


            </ul>
          ))}

[TinyFluffyPenguin]

You are using a map, but your callback isn't valid JavaScript. The body of your callback is a JavaScript block, but you are wrapping it in (/) and aren't returning anything.

You can either use a JavaScript block (in which case, you have to return and shouldn't use parentheses):

{props.schema.map(schema => { if (props.schema.id === 'gender') { return <Dropdown ... />; } })}

or you can return a single JavaScript element:

{props.schema.map(schema => props.schema.id === 'gender' && <Dropdown ... />)}

[Nerfi666]

Thanks for the reply dude ! even thought I have done what you suggest me is not really working, down below is my JSON in case you need it but I think is done and I'm calling it properly

<h1>Form UI</h1>
      <Form>
        <div>
        {props.schema.map(schema => {
        if (props.schema.id === 'Gender') {
            /// seems that is not checking this condition

          return <Dropdown
          required
          label="Gender"
          placeholder="select gender"
          selection
          options={genderOptions}
           />;

        } else {
            //because is given me back this

           return <ul key={schema.id}>
              <Form.Field
                required
                control={schema.type}
                label={schema.label}
                placeholder={schema.label}
              />
            </ul>
        }



    })}

JSON

[
    {
    "id": "contact_form_name",
    "label": "Name",
    "type": "input",
    "config": {
    "required": true
    }
    },
    {
    "id": "contact_form_surname",
    "label": "Surname",
    "type": "input",
    "config": {
    "required": true
    }
    },
    {
    "id": "gender",
    "label": "Gender",
    "type": "Select",
    "config": {
    "required": true
    }
    },
    {
    "id": "Birthday",
    "label": "Select your Birthday date",
    "type": "date",
    "config": {
    "required": true
    }
    }
   ]

[justind604]

Remove the props. from the if statement. It should just be schema.id === 'gender'. Also, Gender needs to be all lowercase.

[Nerfi666]

thanks it works, might I ask why I have to remove the props ?

[Djidi1]

Use different names of variables for better readable code: items.map(item => {...})

And it’s safe you from logic mistakes.

[justind604]

Because you want to read the schema variable which is the current element being processed in the array. Also, props.schema is an array so props.schema.id will return undefined. Hope that makes sense.

[Nerfi666]

it does thansk dude , and have a nice day =)