The curly braces are a special syntax to let the JSX parser know that it needs to interpret the contents in between them as JavaScript instead of a string. You need them when you want to use a JavaScript expression like a variable or a reference inside JSX. Because if you use the standard double … Read more
When calling Object.keys it returns a array of the object’s keys. Object.keys({ test: ”, test2: ”}) // [‘test’, ‘test2’] When you call Array#map the function you pass will give you 2 arguments; the item in the array, the index of the item. When you want to get the data, you need to use item (or … Read more
I got the above error message and it was extremely cryptic. I tried the other solutions mentioned and it didn’t work. Turns out I accidentally forgot to include the to prop in one of the <Link /> components. Wish the error message was better. A simple required prop “to” not found or something like that … Read more
I currently like to format my ternaries like this in react: render () { return ( <div className=”row”> { //Check if message failed (this.state.message === ‘failed’) ? <div> Something went wrong </div> : <div> Everything in the world is fine </div> } </div> ); } You are correct that IIFEs can be used within a … Read more
Add “browser”: true your env to include global variables (like document, window, etc.) See the ESLint environment documentation for more information.
Thanks this helped me a lot. Just wanting to add to this with an example from a Create-React-App project that had the same solution: I received the same error after deploying to heroku. Uncaught SyntaxError: Unexpected token < after serve -s build For me the problem was in the packages.json file. The “homepage” parameter i … Read more
This warning was fixed for me by adding an .babelrc file in the project main folder, with the following content: { “presets”: [“next/babel”], “plugins”: [[“styled-components”, { “ssr”: true }]] } See following link for an example: https://github.com/nblthree/nextjs-with-material-ui-and-styled-components/blob/master/.babelrc
Use arrays: let lineComponent = <Line key={line.client_id} line={line}/>; if (line.created_at) { return [ <div key=”date” className=”date-line”><strong>{line.created_at}</strong></div>, lineComponent, ]; } else { return chat_line; } Or use fragments: import createFragment from “react-addons-create-fragment”; let lineComponent = <Line key={line.client_id} line={line}/>; if (line.created_at) { return createFragment({ date: <div className=”date-line”><strong>{line.created_at}</strong></div>, lineComponent: lineComponent, }); } else { return chat_line; } In … Read more
This is because VSCode’s Typescript version is not using the newest babel features that create-react-app uses by default. You can change VS Code to use the workspace’s version of Typescript instead, which will fix this issue. Open a TypeScript or JavaScript file and click on the TypeScript version number in the Status Bar. A message … Read more
You can comment out JSX by {/**/} Example : render() { return ( <div> <Component1 /> {/* <Component2 /> */} </div> ) } and then Component2 would be commented out