score:1
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.
Source: stackoverflow.com
Related Query
- React - SyntaxError: Unexpected token, expected for the AND operator in a stateless component
- Why am i getting unexpected token for '<>' error in the following piece of react code
- spread operator in react throwing error of Unexpected token
- CDN links for React packages and how to import it when using react using the scripts from CDN
- React Starter Kit and Material UI: userAgent should be supplied in the muiTheme context for server-side rendering
- How to use the same port for React Js and Node Js?
- Is there a clean way to conditionally load and render different components for the same React Router route?
- React project - spread operator in node module unexpected token
- React Native: Transform Error for Unexpected Token (
- Remove the arrow and cross that appears for TextField type=“time” material-ui React
- What is the general practice for express and react based application. Keeping the server and client code in same or different projects/folders?
- Babel 7 Unexpected token for React component
- React testing with Jest and Enzyme (in Symfony) got "Syntax Error: Unexpected token import"
- Can't find what the unexpected token is on (19:9) React Native
- How to make an electron react app, which has 2 windows - a general one and one for the Tray
- React Navigation - navigate and set history for the back button
- Webpack and React -- Unexpected token
- Unexpected token with Webpack and React
- React Unexpected token , expected "..."
- How to serve index.html for React and handle routing at the same paths?
- Getting a " Parsing error: Unexpected token, expected ";" " while making a react application in the following code
- Minified React error #310; use the non-minified dev environment for full errors and additional helpful warnings using Chrome through Selenium in React
- Unexpected token "<" expected "{" when passing Interfaces to React Class Component
- Eslint for a express and react project in the same project
- unexpected token, expected "," inside of react render() function in the return statement
- The increment ++ operator doesn't work for setting react state
- What are the difference/similarities between React (app framework from Facebook) and react.js (reactive extensions for JS)?
- Dynamically create checkboxes and add change handlers for the same : Semantic-ui-react + React
- Why is there a semi-colon in the object structure for expected props in this typescript react component?
- Unexpected Token - Jest for existing React + Web-pack app
More Query from same tag
- searchbar filter results from display but not from the rest of the API
- Why value from a Material-UI Button is not being passed to the onClick event handler?
- Why is my component not rendering?
- SetInterval isn't working in React functional component
- React Redux: How to add a property to an empty object in the reducer
- Tic Tac Toe React Js : Not able to print location
- Path navigation in javascript?
- Change text color based on state or click event
- Change state of another component in React
- React Hook useEffect has a missing dependency when function call
- Reactjs material-UI TextField apply css properties
- How to increment a state variable every second in React
- Dynamically add new key to object after filling form
- How to fix typescript error (Readonly<{}> & Readonly<{ children?: ReactNode; }>)?
- Recharts Responsive Container does not resize correctly in flexbox
- React how to focus div when contentEditable is set to true?
- How to get list content from json without jsx in reactjs?
- How to use groupInnerCellRenderer in AgGrid React
- Next.js: How can I use getStaticProps/getStaticPaths for sites with multiple domains/hostnames?
- Will the background component unmount when modal is open in react? If not, how to maintain/store states of modal and react component using redux?
- How to make CSS apply to icon within parent container?
- Cant resolve './features/reducers' when trying to import rootreducer Redux
- How can I use third js library in react?
- Accessing specific values in a nested object
- Issue of oneSignal integration in ReactJS application
- Passing event elements from input
- React Hook useEffect multiple problems
- Error: <path> attribute d: Expected number, "MNaN,36.393574100…
- Getting latest state data in React using useEffect with history.block route guard
- Pass property to component as variable