score:1

Accepted answer

remove the curly braces around

 { showcollapsebutton && (
      <div>
        <formattedmessage id="headertext.showmore" />
        <image
          src={arrowdownimageurl}
        />
      </div>
      )
    }

make it as

showcollapsebutton && (
      <div>
        <formattedmessage id="headertext.showmore" />
        <image
          src={arrowdownimageurl}
        />
      </div>
      )

it should work. no need to wrap around {}

score:0

your error has nothing to do with jsx or react, but with arrow function syntax. you are using the advanced syntax of arrow functions that parenthesize the body of function to return an object literal expression:

const example = () => ({foo: 'bar'}) 
console.log(example().foo)

so, when the compiler found &&, it say that expected a , inside de object.

const example = () => ({foo && 'bar'}) 

to solve this, you have two options, remove the parenthesis and put a return inside you function:

const example = () => {return true && 'bar'}
console.log(example())

or just remove the curly braces, because you only have 1 statement inside the body of your arrow function.

const example = () => true && 'bar'
console.log(example())

as you have several lines for this only statement, is a good practice evolve it in parenthesis to avoid auto ; pitfall inside your statement:

const example = () => (true && 
                       'bar')
console.log(example())

even if you use the return form with curly braces, you should use parenthesis evolving your returned value, that is one statement in several lines, for best practices:

const example = () => {
    return (true && 
            'bar')
}
console.log(example())

score:1

to fix this, you can either remove the curly braces, like this:

const collapsebutton = ({ showcollapsebutton }) => (
    showcollapsebutton && (
      <div>
        <formattedmessage id="headertext.showmore" />
        <image
          src={arrowdownimageurl}
        />
      </div>
      )
);

collapsebutton.proptypes = {
  showcollapsebutton: proptypes.bool.isrequired,
};

export const collapsebutton;

or add a return statement, like this:

const collapsebutton = ({ showcollapsebutton }) => {
    return showcollapsebutton && (
      <div>
        <formattedmessage id="headertext.showmore" />
        <image
          src={arrowdownimageurl}
        />
      </div>
      )
};

collapsebutton.proptypes = {
  showcollapsebutton: proptypes.bool.isrequired,
};

export const collapsebutton;

note the top-level parentheses have been changed to curly braces in this second example.


Related Query

More Query from same tag