reactjs意外的令牌“ /”

Question

Hello i am trying to render a React component dynamically look:

render: function() {
    return (
        <form  {...this.props}>
            <div className={'row'}>
                {this.props.fields.map(function(field, index){
                    if (index != 0 &&index%3==0) {
                        return (
                            </div><div className={'row'}>
                            <div className={'col-sm-4'}>
                                ...
                            </div>
                        )
                    } else{
                        return (
                            <div className={'col-sm-4'}>
                                ...
                            </div>
                        )
                    }
                })}
            </div>
        </form>
    );
}

but i am getting this error "Parse Error: Line 17: Unexpected token / while parsing file..."

the line 17 in my file is </div><div className={'row'}>

There is another way to do this? and is it possible to put all my duplicated code inside a variable?

Obs: i am using browserify(7.0.x) and reactfy(0.17.1)

Answer 1

To formalize the correct answer described by FakeRainBrigand and elaborated on by dirkk in the comments above, here's a modified render that fixes the invalid HTML:

render: function() {
  return (
    <form  {...this.props}>
      <div className={'row'}>
        {
          this.props.fields.map(function(field, index) {
            if (index !== 0 && index % 3 === 0) {
              return (
                <div className={'row'}>
                  <div className={'col-sm-4'}>
                    {/* Whatever else each field is supposed to do if the index isn't zero but is divisible by three */}
                  </div>
                </div>
              )
            } else {
              return (
                <div className={'col-sm-4'}>
                  {/* Whatever else each field is supposed to do if the index is zero or isn't divisible by three */}
                </div>
              )
            }
          })
        }
      </div>
    </form>
  );
}

The issue was in the if block, which (with minor code formatting updates) initially looked like this:

if (index !== 0 && index % 3 === 0) {
  return (
    </div>
    <div className={'row'}>
      <div className={'col-sm-4'}>
        {/* ... */}
      </div>
  )
}

The </div> at the start of the block is invalid HTML since it is not associated with an earlier <div> --you can't close a tag that hasn't been opened. However, removing the leading </div> won't solve the issue: by fixing the indentation it becomes clear that the </div> was likely intended to be at the end of this block, as the div with class row is never closed. The corrected version of this block looks like this:

if (index !== 0 && index % 3 === 0) {
  return (
    <div className={'row'}>
      <div className={'col-sm-4'}>
        {/* Whatever else each field is supposed to do if the index isn't zero but is divisible by three */}
      </div>
    </div>
  )
}