I use WebStorm for React JS and I'm getting this 'Unresolved variable warning' for all props.
I searched for solution everywhere but couldn't find. Whenever i pass down prop value and then use it as this.props.something, that something is unresolved. App works fine and there is no problem, it's just that WebStorm makes this irritating. I installed typescript definitions and nothing.
This is the code:
import React from 'react';
import ReactDOM from 'react-dom';
class A extends React.Component
{
render()
{
return (
<button>
{this.props.something}
</button>
);
}
}
class B extends React.Component
{
render()
{
return(
<A something={1}/>
)
}
}
ReactDOM.render(
<B/>,
document.getElementById('root')
);
Here is screenshot of that:
Screenshot
Known issue, please follow WEB-31785 for updates
npm install --save #types/react
use es6 destructuring to remove the warnings:
eg : rather than
if (this.props.variableName) ...
use
const { variableName } = this.props;
if (variableName) ...
Related
I have a catalago-component.js which is a web component. I'm trying to use this web component like so:
import React from 'react'
import './../../../assets/catalago-component'
class Loja extends React.Component{
constructor(props){
super(props)
this.state = {}
}
render(){
return(
<React.Fragment>
<div className="page-header">
<h1 className="page-title">Loja</h1>
</div>
<catalago-component></catalago-component>
</React.Fragment>
)
}
}
export default Loja
but every time I run my react app I get this error
src\assets\catalago-component.js
Line 1:1: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 1:85: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 1:399: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 1:599: Expected an assignment or function call and instead saw an expression no-unused-expressions
...
but if I do any changes to the app that makes it recompile then it works just fine
how to solve this error forever? I don't want this app breaking every time I run it for the first time
EDIT: I tried to use this web component with pure html and it worked. take a look
https://eduardopreuss.github.io/web-component/
https://github.com/eduardopreuss/web-component
EDIT 2: link to codesandbox using react + web component https://codesandbox.io/s/hopeful-cohen-ut6mv?file=/src/App.js
I think you might want to try something like this:
import Catalago from './../../../assets/catalago-component'
Then use the component like:
<Catalago></Catalago>
Assuming your Web component issomething like this:
class Catalago extends React.Component {
render() {
return <speical-web-stuff><speical-web-stuff>
}
}
See:https://reactjs.org/docs/web-components.html
As said above, you should give your component a name in order to import.
import Catalago from './../../../assets/catalago-component'
However, sth you may pay attention to.
Below syntax expect your component is written in index.js under the folder catalago-component
import Catalago from './assets/catalago-component' //component locate in file name ```index```
import Catalago from './assets/catalago-component/customizedName.js'
which type of export used in that component
import Catalago from './assets/catalago-component/customizedName.js' // exporting via ```export default``` keyword
import { Catalago } from './assets/catalago-component/customizedName.js' //exporting via ```export``` keyword
Inside your webpack.config.js add this line
Than you can use your component from anywhere inside project.
import Catalago from 'Components'
There is nothing wrong how I imported, it was a eslint error just like #tsecheukfung01 said in the comments. So I added my web component to .eslintignore file and It worked just fine.
more ways to ignore eslint errors here
The way you import your component is perfectly fine.
A web-component is nothing more than any other HTMLElement like a <div> or an <a>, meaning this is NOT a React component and cannot be imported and used as such.
Example web-component
export class MyComponent extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.innerHTML = `My Webcomponent!`
}
static get tag() {
return 'my-component';
}
}
customElements.define(MyComponent.tag, MyComponent);
Using the above web-component would look something like:
import './../../../assets/MyComponent.js'
...
render() {
return() {
<div>
<my-component></my-component>
</div>
}
}
import Catalago from './../../../assets/catalago-component'
...
render() {
return() {
<div>
<Catalago //other props/>
</div>
}
}
Just getting started with Handsontable. I used create-react-app and npm install --save react-handsontable.
Added a table to App.js:
import React, { Component } from 'react';
import HotTable from 'handsontable'
class App extends Component {
render() {
return (
<HotTable/>
);
}
}
export default App;
And seeing error:
TypeError: rootElement.insertBefore is not a function
node_modules/handsontable/dist/handsontable.js:8197
rootElement.insertBefore(this.container, rootElement.firstChild);
From searching the web it seems this may have something to do with load order issues, but I'm not sure what I can change.
Solution: I was importing handsontable but I should have imported react-handsontable.
import HotTable from 'react-handsontable'
This is documented correctly but I did not notice that detail.
https://github.com/handsontable/react-handsontable
I have a very basic program of react with tsx, I am getting an error which I am not able to figure out why
import React from 'react';
// import {connect} from 'react-redux'
export class Home extends React.Component {
render(){
console.log(this.props)
return (
<div>Working</div>
)
}
}
import * as React from 'react'
import * as ReactDOM from 'react-dom';
import {Home} from './Components/Home.component'
class App extends React.Component<any,any>{
render(){
return(
<Home value="abc" />
)
}
}
ReactDOM.render( <App />, window.document.getElementById("app"))
git clone this for code
After pulling down your repo and inspecting it, I realised that you do not have react typings for typescript.
Typings is the simple way to manage and install TypeScript definitions
Adding this line
"#types/react": "^16.0.25" // or another version you prefer
to the package.json and running npm i or yarn if you are using yarn as a package manager, one more time, solved the issue.
Try it out and let me know if this solves it on your side :)
PS: TypeScript requires you to describe the shape of your objects and your data. If you look at the other answer I provided earlier, it was pretty much a long and complicated version of You need to specify a type that describes your props and need to pass this to the component in question
Typescript needs to know the shape of the props and state passed to a component. If you really want to stop Typescript from enforcing typings in your component (which, btw, defeats the whole purpose of using Typescript), then, the component that needs access to the props or state passed to it has to specify the type or shape so to speak, as any. That is, your component will look something like this
export class Home extends React.Component<any, any>
instead of
export class Home extends React.Component
which btw, is an incorrect way of extending a class if that class expects props and/or state.
Passing any type for props and state means that the component in question must accept any kind of shape (type) for both props and state.
Try this
import * as React from "react";
import * as ReactDOM from 'react-dom';
export class Home extends React.Component<any, any> {
render() {
console.log(this.props)
return (
<div>Working</div>
)
}
}
class App extends React.Component{
render() {
return (
<Home value="abc" />
)
}
}
ReactDOM.render(<App />, document.getElementById("app"));
and everything should work as expected because you got Typescript out of your way in terms of type-checking for you.
You can also view the demo here
If you actually wanted to enforce the shape (type) of the props and/or state you would then have to define these shapes with, usually, an interface or inline type annotation. Here is an example of the same code above that enforces the shape of the props using the former method:
import * as React from "react";
import { render } from "react-dom";
interface Props {
value:string,
name:string
}
export default class Home extends React.Component<Props>{
render() {
console.log(this.props)
return (
<div>Working. The props values are: {this.props.value} {this.props.name}</div>
)
}
}
class App extends React.Component {
render() {
return (
<Home value="abc" name="def"/>
)
}
}
render(<App />, document.getElementById("root"));
Now, here you could never be able to add any other prop to the Home component that is not defined in the Props interface.
For example doing something like:
<Home value="abc" name="DEF" somethin="else"/>
would not compile because somethin is not defined in the interface that is used by the Home component.
To enforce the shape of the state you'd have to do the same thing as for the props, i.e. define a contract (interface).
Also, note that you still need to access your props via this NOT Props as this is just a type definition of the structure not holder of the values themselves.
You can view the demo for this alternative here
Is there a way to parse Markdown in React using Typescript?
I am trying to do things like:
import * as ReactMarkdown from 'react-markdown'
// OR
import ReactMarkdown = require('react-markdown')
But Typescript can't fint module 'react-markdown' as it's not defined:
Error: TS2307: Cannot find module 'react-markdown'.
How can I define the module and use it as a React component?
I solved my problem by using commonmark package instead. They have typings and everything needed for my environment. Here is my implementation:
import { HtmlRenderer, Parser } from 'commonmark'
export class MyComponent extends React.Component<{}, {}> {
private post: string
constructor () {
super()
let parser = new Parser()
let renderer = new HtmlRenderer()
this.post = renderer.render(parser.parse("**works** like a charm!"))
}
render () {
return (
<div dangerouslySetInnerHTML={ {__html: this.post} } />
)
}
}
Also, do not forget to add the typings for commonmark:
$ typings install --global --save dt~commonmark
Thanks to the people who tried to help!
Is there a way to parse Markdown in React using Typescript?
I am trying to do things like:
import * as ReactMarkdown from 'react-markdown'
// OR
import ReactMarkdown = require('react-markdown')
But Typescript can't fint module 'react-markdown' as it's not defined:
Error: TS2307: Cannot find module 'react-markdown'.
How can I define the module and use it as a React component?
I solved my problem by using commonmark package instead. They have typings and everything needed for my environment. Here is my implementation:
import { HtmlRenderer, Parser } from 'commonmark'
export class MyComponent extends React.Component<{}, {}> {
private post: string
constructor () {
super()
let parser = new Parser()
let renderer = new HtmlRenderer()
this.post = renderer.render(parser.parse("**works** like a charm!"))
}
render () {
return (
<div dangerouslySetInnerHTML={ {__html: this.post} } />
)
}
}
Also, do not forget to add the typings for commonmark:
$ typings install --global --save dt~commonmark
Thanks to the people who tried to help!