Messing up jsx formatting multi-line attribute

[buinauskas]

I've got latest version installed. My files are opened as Babel JS files and I have e4x set to true in my configuration file. This is what I have currently:

return (
  <a href="#"
    onClick={e => {
      e.preventDefault()
      onClick()
    }}>
    {children}
  </a>
);

However, after formatting it becomes this:

return ( < a href = "#"
  onClick = {
    e => {
      e.preventDefault()
      onClick()
    }
  } > { children } < /a>
);

What do I need to change to have my files formatted properly or at least not messed up?

[bitwiseman]

Have you set e4x=true?

[buinauskas]

@bitwiseman Yes, I did.

[Firef0x]

Me too with e4x=true! It's really weird. 😂

[bitwiseman]

Thanks! I've added it to my list for the next version.

[bitwiseman]

Here's what I have found out about this issue:

// successful - no change
return(
    <a href="#" onClick={e => {      e.preventDefault()      onClick()}}>
    {children}
  </a>
);


// successful - no change
return <b><a href="#"
    onClick={e => {
      e.preventDefault()
      onClick()
    }}>
    {children}
  </a></b>;

// failure - adds spaces 
return <a href="#"
    onClick={e => {
      e.preventDefault()
      onClick()
    }}>
    {children}
</b>;