ReactJS style background image with url - reactjs

Getting an error on this
<body onload="setupZoom();" style={{background:url("/img/bg.jpg") repeat-x #fff}}>
Babel is complaining either about regular expressions when I take the double quotes out, or an unexpected token ,.
{ SyntaxError: /Users/robert/multiDomainCMS/views/winwinhost.com/index.jsx: Unexpected token, expected "," (49:72)
47 | <title>Unlimited Windows Web Hosting, Unlimited Reseller Hosting, Web hosting & Domain Names</title>
48 | </head>
> 49 | <body onload="setupZoom();" style={{background:url("/img/bg.jpg") repeat-x #fff}}>
| ^
50 |
51 | <div class="d_container">
52 | <div class="d_header">
at Object.raise (/Users/robert/multiDomainCMS/node_modules/#babel/parser/lib/index.js:3831:17)
at Object.unexpected (/Users/robert/multiDomainCMS/node_modules/#babel/parser/lib/index.js:5143:16)
at Object.expect (/Users/robert/multiDomainCMS/node_modules/#babel/parser/lib/index.js:5135:28)
at Object.parseObj (/Users/robert/multiDomainCMS/node_modules/#babel/parser/lib/index.js:6600:14)
at Object.parseExprAtom (/Users/robert/multiDomainCMS/node_modules/#babel/parser/lib/index.js:6229:21)
at Object.parseExprAtom (/Users/robert/multiDomainCMS/node_modules/#babel/parser/lib/index.js:3552:20)
at Object.parseExprSubscripts (/Users/robert/multiDomainCMS/node_modules/#babel/parser/lib/index.js:5862:23)
at Object.parseMaybeUnary (/Users/robert/multiDomainCMS/node_modules/#babel/parser/lib/index.js:5842:21)
at Object.parseExprOps (/Users/robert/multiDomainCMS/node_modules/#babel/parser/lib/index.js:5729:23)
at Object.parseMaybeConditional (/Users/robert/multiDomainCMS/node_modules/#babel/parser/lib/index.js:5702:23)
pos: 3141,
loc: Position { line: 49, column: 72 },
code: 'BABEL_PARSE_ERROR' }
I would really appreciate some help, because I have no clue:
What am I doing wrong?

You forgot to add single quotes to the background value <body onload="setupZoom();" style={{background: 'url("/img/bg.jpg") repeat-x #fff'}}>

Related

Solana web3 Program constructor is expecting a json as one of params

I am working with typescript react and I need help with how to fix the issue. My constructor object is expecting one of the arguments to be Idl type which is basically a json generated from solana. How do i fix this?
yeah there is a weird thing with TypeScript and the IdlType on args if you look into the IDL object representation.
It is related to this line:
export declare type IdlType = "bool" | "u8" | "i8" | "u16" | "i16" | "u32" | "i32" | "f32" | "u64" | "i64" | "f64" | "u128" | "i128" | "bytes" | "string" | "publicKey" | IdlTypeDefined | IdlTypeOption | IdlTypeCOption | IdlTypeVec | IdlTypeArray;
The way fixed it is by using a workaround:
import YOUR_IDL_JSON_OBJECT from '../config/abiSolana/solanaIDL.json'
const a = JSON.stringify(YOUR_IDL_JSON_OBJECT)
const b = JSON.parse(a)
return new Program(b, address, provider)
When you do this the compiler should not scream at you. If someone cares to explain what the hell is wrong with the enum there, I would be happy. :)

Not null assertion operator in React

The following error is coming in build time:
src/views/contact-page/contact.page.tsx
Line 25:29: Parsing error: Missing semicolon.
23 | const [test, setTest] = useState<string | null>(null);
24 | setTest("test");
> 25 | const test2: string = test!;
| ^
26 |
Please explain why I could not use not-null assertion operator?
I don't believe this is valid JS (Or typescript) syntax.
const test2: string = test!;
The documentation for TS doesn't list this anywhere as a valid check for null - you can do something like this with objects but I don't believe you can do this for a variable like this.
let s = e!.name; // Assert that e is non-null and access name
Even if that did work, your variable would just be undefined instead of null in the case that test was null.

Why React complains about key not provided when it is there?

I'm trying to get rid off the following warning from React:
console.error
Warning: Each child in a list should have a unique "key" prop.
Check the render method of `UsersList`. See https://reactjs.org/link/warning-keys for more information.
at h4
in UsersList (at UsersList.test.jsx:28)
5 |
6 | return (
> 7 | <>
| ^
8 | {props.users.map(user => <h4 className='box title is-4' key={user.id}>{user.username}</h4>)}
9 | </>
10 | )
As you can see unique key is being given to each h4 element.
Why the test runner keeps complaining and pointing at React fragment tag ?
The h4 element doesn't have any children.
Thank you.

Typescript error on local machine but not on remote test server

I'm trying to use Microsoft Fabric's UI tools. This is the error I get on my local machine.
/Developer/React/TCV.ts/tcv/src/CategorySelection.tsx(94,9):
Type '(filterText: string, currentPersonas: IPersonaProps[], limitResults?: number | undefined) => IPersonaProps[] | Promise<IPersonaProps[]>' is not assignable to type '(filter: string, selectedItems?: IPersonaProps[] | undefined) => IPersonaProps[] | PromiseLike<IPersonaProps[]>'.
Types of parameters 'currentPersonas' and 'selectedItems' are incompatible.
Type 'IPersonaProps[] | undefined' is not assignable to type 'IPersonaProps[]'.
Type 'undefined' is not assignable to type 'IPersonaProps[]'. TS2322
92 | <CompactPeoplePicker
93 | // eslint-disable-next-line react/jsx-no-bind
> 94 | onResolveSuggestions={onFilterChanged}
| ^
95 | // eslint-disable-next-line react/jsx-no-bind
96 | onEmptyInputFocus={returnMostRecentlyUsed}
97 | getTextFromItem={getTextFromItem}
However, when I load my exact same code to codesandbox.io the error disappears and it works fine. My files are the same, and package.json is identical. What can be causing this behavior?
EXAMPLE:
https://codesandbox.io/s/restless-darkness-xypss?file=/src/Search.tsx
It worked for me also after changing the
"strict": false,
in tsconfig.json

failed to compile: Parsing error unexpected token

Failed to Compile: Parsing error unexpected token. The error is on line 20
I am new to React I was following a Brad Traversy tutorial and cant seem to debug this code error. I included the full code below.
./src/Components/AddProject.js
Line 20: Parsing error: Unexpected token
18 | e.preventDefault();
19 | }
> 20 | if(this.refs.title.value === ''){
| ^
21 | alert('Title is required');
22 | } else {
23 | this.setState({newProject:{
You cannot attach flying code in an ES6 JavaScript Class.
It actually doesn't mean anything.
A ES6 Javascript Class will only accept constructor, fields and methods.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
Are you sure that the code below the line of the syntax error shouldn't be wrapped into a method or into render() ?

Resources