I have looked around a bit for a solution to this problem. All of them suggest adding `&quot;jsx&quot;: &quot;react&quot;` to your tsconfig.json file. Which I have done. Another one was to add `&quot;include: []&quot;`, which I have also done. However, I am still getting the error when I am trying to edit `.tsx`files. Below is my tsconfig file.

    {
        &quot;compilerOptions&quot;: {
            &quot;module&quot;: &quot;commonjs&quot;,
            &quot;target&quot;: &quot;es5&quot;,
            &quot;allowJs&quot;: true,
            &quot;checkJs&quot;: false,
            &quot;jsx&quot;: &quot;react&quot;,
            &quot;outDir&quot;: &quot;./build&quot;,
            &quot;rootDir&quot;: &quot;./lib&quot;,
            &quot;removeComments&quot;: true,
            &quot;noEmit&quot;: true,
            &quot;pretty&quot;: true,
            &quot;skipLibCheck&quot;: true,
            &quot;strict&quot;: true,
            &quot;moduleResolution&quot;: &quot;node&quot;,
            &quot;esModuleInterop&quot;: true
        },
        &quot;include&quot;: [
            &quot;./lib/**/*&quot;
        ],
        &quot;exclude&quot;: [
            &quot;node_modules&quot;
        ]
    }
Any suggestions would be helpful. I am using babel 7 to compile all the code with the env, react and typescript presets. If you guys need more files to help debug this, let me know.

Cannot use JSX unless the &#39;--jsx&#39; flag is provided

I have a response like this: 

[![enter image description here][1]][1]

I want to display the name of each object inside this HTML:

    {subjects.map((item, i) =&gt; (
      &lt;li className=&quot;travelcompany-input&quot; key={i}&gt;
        &lt;span className=&quot;input-label&quot;&gt;{ item.name }&lt;/span&gt;
      &lt;/li&gt;
    ))}   

But it throws an error of `subjects.map is not a function`.

First, I have to define the keys of the objects where it creates an array of keys, where I want to loop through and show the `subject.names`.

What I also tried is this: 

    {Object.keys(subjects).map((item, i) =&gt; (
      &lt;li className=&quot;travelcompany-input&quot; key={i}&gt;
        &lt;span className=&quot;input-label&quot;&gt;key: {i} Name: {subjects[i]}&lt;/span&gt;
      &lt;/li&gt;
    ))}

   
  [1]: https://i.stack.imgur.com/7Whrk.png

How can I map through an object in ReactJS?

For an example, to set a style in react you could do

`var css = {color: red}`
   
and 

`&lt;h1 style={css}&gt;Hello world&lt;/h1&gt;`

Why do you need the curly braces around css in the second code snippet?

What do curly braces mean in JSX (React)?

I realize this question has been asked multiple times but nothing has worked for me...

I&#39;m trying to create a static build of a `create-react-app` project but I&#39;m getting the following errors:


    Uncaught SyntaxError: Unexpected token &lt;     1.ca81c833.chunk.js:1
    Uncaught SyntaxError: Unexpected token &lt;     main.7ced8661.chunk.js:1

Due to these files being minified, I&#39;m not sure where to begin in debugging them.

Per other SO responses, here are some things I&#39;ve tried:

    //Original index.html file, which gets included in the built file:
    &lt;script type=&quot;text/babel&quot; src=&quot;https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js&quot;&gt;&lt;/script&gt;

    //package.json
    &quot;babel-preset-es2015&quot;: &quot;^6.24.1&quot;,
    &quot;babel-preset-react&quot;: &quot;^6.24.1&quot;,

    //.babelrc file
    {
      &quot;presets&quot;: [&quot;react&quot;, &quot;es2015&quot;, &quot;stage-1&quot;]
    }

Not sure if this is relevant, but I have this on my express server, which I believe is standard:

    if (process.env.NODE_ENV === &quot;production&quot;) {
    
        app.use(express.static(&#39;client/built&#39;));
        app.get(&quot;*&quot;, (req, res) =&gt; {
            res.sendFile(require(&#39;path&#39;)
            	.resolve(__dirname, &#39;client&#39;, &#39;build&#39;, &#39;index.html&#39;));
        })
    }

Assuming it&#39;s actually a JSX issue, the whole thing is very confusing - shouldn&#39;t `create-react-app` be handling JSX automatically?

**UPDATE**: I just posted this question but already have a relevant update.  I&#39;m able to serve the page statically through pm2 by running `pm2 serve build` so I think the issue may be with my server configuration.

Create-React-App build - &quot;Uncaught SyntaxError: Unexpected token &lt;&quot;

I have function which dispatched an action. I would like to display a loader before and after the action. I know that react composing the object passed to `setState`. the question is how can I update the property in async way:

&lt;!-- language: lang-js --&gt;

    handleChange(input) {
		this.setState({ load: true })
		this.props.actions.getItemsFromThirtParty(input)
        this.setState({ load: false })
	}

Basically, it all worked great if I put this property as part of the application state (using Redux), but I really prefer to bring this property to the component-state only.

Set loading state before and after an action in a React class component

The problem I faced is with the `img` tag. When a single image is concerned,
The below code loads the image:
 

    import image1 from &#39;./images/image1.jpg&#39;;
    &lt;img src={image1} /&gt;

But the below code doesn&#39;t load:

     &lt;img src={&#39;./images/image1.jpg&#39;}/&gt;
                or
      &lt;img src=&#39;./images/image1.jpg&#39;/&gt;


I need to loop through json, something like: 

    [{&#39;img&#39;:&#39;./images/image1.jpg&#39;,&#39;name&#39;:&#39;AAA&#39;}, {&#39;img&#39;:&#39;./images/image2.jpg&#39;,&#39;name&#39;:&#39;BBB&#39;}]

Plus, display each of them as image with name as footer. Looping is fine but the images doesn&#39;t load. It is not actually possible for me to import every images to add. I don&#39;t use anything other than JSX as of now. Please favour.

Display images in React using JSX without import

Here&#39;s what I tried and how it goes wrong.

This works:

    &lt;div dangerouslySetInnerHTML={{ __html: &quot;&lt;h1&gt;Hi there!&lt;/h1&gt;&quot; }} /&gt;

This doesn&#39;t:

    &lt;div dangerouslySetInnerHTML={{ __html: this.props.match.description }} /&gt;

---

The description property is just a normal string of HTML content. However it&#39;s rendered as a string, not as HTML for some reason.

[![enter image description here][1]][1]

Any suggestions?


  [1]: http://i.stack.imgur.com/cI25q.png

Render HTML string as real HTML in a React component

I am trying to write a React component for HTML heading tags(`h1`, `h2`, `h3`, etc.), where the heading level is specified via a prop.

I tried to do this like this:

```
&lt;h{this.props.level}&gt;Hello&lt;/h{this.props.level}&gt;
```

and expected output like:

```
&lt;h1&gt;Hello&lt;/h1&gt;
```

but this is not working. Is there any possible method to do this?

Dynamic tag name in React JSX

I am getting this error: 

```
Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
```

This is my code:

    var React = require(&#39;react&#39;)
    var ReactDOM =  require(&#39;react-dom&#39;)
    var Router = require(&#39;react-router&#39;)
    var Route = Router.Route
    var Link = Router.Link
    
    var App = React.createClass({
      render() {
        return (
          &lt;div&gt;
            &lt;h1&gt;App&lt;/h1&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;Link to=&quot;/about&quot;&gt;About&lt;/Link&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        )
      }
    })
    
    var About = require(&#39;./components/Home&#39;)
    ReactDOM.render((
      &lt;Router&gt;
        &lt;Route path=&quot;/&quot; component={App}&gt;
          &lt;Route path=&quot;about&quot; component={About} /&gt;
        &lt;/Route&gt;
      &lt;/Router&gt;
    ), document.body)

My `Home.jsx` file:

    var React = require(&#39;react&#39;);
    var RaisedButton = require(&#39;material-ui/lib/raised-button&#39;);
    
    var Home = React.createClass({
      render:function() {
        return (
            &lt;RaisedButton label=&quot;Default&quot; /&gt;
        );
      },
    });
    
    module.exports = Home;



Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object

I am using the &amp;nbsp tag in jsx and it is not rendering the space. The following is a small snippet of my code.Please help.

    var Reporting=React.createClass({

      render: function(){
        return(
          &lt;div style={divPositionReporting}&gt;
              &lt;p&gt;Pricing Reports&lt;/p&gt;
              &lt;hr&gt;&lt;/hr&gt;
              Select Scenario:&amp;nbsp;&amp;nbsp;
              &lt;select&gt;
                &lt;option&gt;&lt;/option&gt;
              &lt;/select&gt;
              &lt;button type=&quot;button&quot;&gt;Get Pricing Report&lt;/button&gt;
              &lt;br/&gt;
              Select Takeout Scenario:&amp;nbsp;
              &lt;select&gt;
                &lt;option&gt;&lt;/option&gt;
              &lt;/select&gt;
              &lt;button type=&quot;button&quot;&gt;Get Pricing Report&lt;/button&gt;
              &lt;br/&gt;
          &lt;/div&gt;
        );
      },

    });
	


&amp;nbsp jsx not working

Curious what the right way to approach this is:

    var Hello = React.createClass({
    getInitialState: function() {
        return {total: 0, input1:0, input2:0};
    },
    render: function() {
        return (
            &lt;div&gt;{this.state.total}&lt;br/&gt;
                &lt;input type=&quot;text&quot; value={this.state.input1} onChange={this.handleChange} /&gt;
                &lt;input type=&quot;text&quot; value={this.state.input2} onChange={this.handleChange} /&gt;
            &lt;/div&gt;
        );
    },
    handleChange: function(e){
        this.setState({ ??? : e.target.value});
        t = this.state.input1 + this.state.input2;
        this.setState({total: t});
    }
    });
 
    React.renderComponent(&lt;Hello /&gt;, document.getElementById(&#39;content&#39;));

Obviously you could create separate handleChange functions to handle each different input, but that&#39;s not very nice.  Similarly you could create a component just for an individual input, but I wanted to see if there&#39;s a way to do it like this.

React.js: Identifying different inputs with one onChange handler

I&#39;m running lint with my React app, and I receive this error:

    error    JSX props should not use arrow functions        react/jsx-no-bind

And this is where I&#39;m running the arrow function (inside `onClick`):

    {this.state.photos.map(tile =&gt; (
      &lt;span key={tile.img}&gt;
        &lt;Checkbox
          defaultChecked={tile.checked}
          onCheck={() =&gt; this.selectPicture(tile)}
          style={{position: &#39;absolute&#39;, zIndex: 99, padding: 5, backgroundColor: &#39;rgba(255, 255, 255, 0.72)&#39;}}
        /&gt;
        &lt;GridTile
          title={tile.title}
          subtitle={&lt;span&gt;by &lt;b&gt;{tile.author}&lt;/b&gt;&lt;/span&gt;}
          actionIcon={&lt;IconButton onClick={() =&gt; this.handleDelete(tile)}&gt;&lt;Delete color=&quot;white&quot;/&gt;&lt;/IconButton&gt;}
        &gt;
          &lt;img onClick={() =&gt; this.handleOpen(tile.img)} src={tile.img} style={{cursor: &#39;pointer&#39;}}/&gt;
        &lt;/GridTile&gt;
      &lt;/span&gt;
    ))}

Is this a bad practice that should be avoided? And what&#39;s the best way to do it?

Why shouldn&#39;t JSX props use arrow functions or bind?

I have an checkbox TSX(JSX) element:

    &lt;input type=&quot;checkbox&quot; name={i.toString()} onClick={this.handleCheckboxClick} /&gt;

With the help of VS code I know that the input parameter type of the `this.handleCheckboxClick` is `MouseEvent&lt;HTMLInputElement&gt;`. So I implemented it with:

    private handleCheckboxClick(event: MouseEvent&lt;HTMLInputElement&gt;) {
        ...
    }

Then I get an error saying `[ts] Type &#39;MouseEvent&#39; is not generic.` As shown in the image below:

[![enter image description here][1]][1]

Version of my packages:

    &quot;@types/react&quot;: &quot;^15.0.29&quot;,
    &quot;@types/react-dom&quot;: &quot;^15.5.0&quot;,
    &quot;react&quot;: &quot;^15.6.1&quot;,
    &quot;react-dom&quot;: &quot;^15.6.1&quot;,
    &quot;typescript&quot;: &quot;^2.3.4&quot;,

Why is that?


  [1]: https://i.stack.imgur.com/2xdvK.jpg

Why is the `MouseEvent` in the checkbox event handler not generic?

I am generating a `dl` in React:

```javascript
&lt;dl&gt;
  {
    highlights.map(highlight =&gt; {
      const count = text.split(highlight).length - 1;

      return (
        &lt;&gt;
          &lt;dt key={`dt-${highlight.id}`}&gt;{highlight}&lt;/dt&gt;
          &lt;dd key={`dd-${highlight.id}`}&gt;{count}&lt;/dd&gt;
        &lt;/&gt;
      );
    })
  }
&lt;/dl&gt;
```

This gives me the warning:

&gt; Warning: Each child in a list should have a unique &quot;key&quot; prop.

This will remove the warning, but doesn&#39;t generate the HTML I want:

```javascript
&lt;dl&gt;
  {
    highlights.map(highlight =&gt; {
      const count = text.split(highlight).length - 1;

      return (
        &lt;div key={highlight.id}&gt;
          &lt;dt&gt;{highlight}&lt;/dt&gt;
          &lt;dd&gt;{count}&lt;/dd&gt;
        &lt;/div&gt;
      );
    })
  }
&lt;/dl&gt;
```

And I cannot add a `key` prop to a fragment (`&lt;&gt;   &lt;/&gt;`). 

How can work around this?

----------

I am using React `16.12.0`. 

Can I add a key prop to a React fragment?

I have an object contains multiple common key-value props, that I want to pass on to some jsx. Something like this: 

    const commonProps = {myProp1: &#39;prop1&#39;,myProp2: &#39;prop2&#39;};
    &lt;MyJsx commonProps /&gt;

I want this to function as passing individual props:

    &lt;MyJsx myProp1={commonProps.myProp1} myProp2={commonProps.myProp2}/&gt;


Is this possible? 

Passing object as props to jsx

I&#39;ve setup `eslint` &amp; `eslint-plugin-react`. 

When I run ESLint, the linter returns `no-unused-vars` errors for each React component.

I&#39;m assuming it&#39;s not recognizing that I&#39;m using JSX or React syntax. Any ideas?

Example: 

**app.js**

    import React, { Component } from &#39;react&#39;;
    import Header from &#39;./header.js&#39;;
    
    export default class App extends Component {
      render() {
        return (
          &lt;div&gt;
            &lt;Header /&gt;
          	{this.props.children}
          &lt;/div&gt;
        );
      }
    }

**Linter Errors:**

    /my_project/src/components/app.js
      1:8  error  &#39;React&#39; is defined but never used   no-unused-vars
      2:8  error  &#39;Header&#39; is defined but never used  no-unused-vars

**Here is my `.eslintrc.json` file:**

    {
        &quot;env&quot;: {
            &quot;browser&quot;: true,
            &quot;es6&quot;: true
        },
        &quot;extends&quot;: &quot;eslint:recommended&quot;,
        &quot;parserOptions&quot;: {
            &quot;ecmaFeatures&quot;: {
                &quot;experimentalObjectRestSpread&quot;: true,
                &quot;jsx&quot;: true
            },
            &quot;sourceType&quot;: &quot;module&quot;
        },
        &quot;plugins&quot;: [
            &quot;react&quot;
        ],
        &quot;rules&quot;: {
            &quot;react/jsx-filename-extension&quot;: [1, { &quot;extensions&quot;: [&quot;.js&quot;, &quot;.jsx&quot;] }],
            &quot;indent&quot;: [
                &quot;error&quot;,
                2
            ],
            &quot;linebreak-style&quot;: [
                &quot;error&quot;,
                &quot;unix&quot;
            ],
            &quot;quotes&quot;: [
                &quot;error&quot;,
                &quot;single&quot;
            ],
            &quot;semi&quot;: [
                &quot;error&quot;,
                &quot;always&quot;
            ]
        }
    }



ESLint with React gives `no-unused-vars` errors

I&#39;m working on a project with Typescript, React and Redux (all running in Electron), and I&#39;ve run into a problem when I&#39;m including one class based component in another and trying to pass parameters between them. Loosely speaking, I&#39;ve got the following structure for the container component:

    class ContainerComponent extends React.Component&lt;any,any&gt; {
      ..
      render() {
        const { propToPass } = this.props;
        ...
        &lt;ChildComponent propToPass={propToPass} /&gt;
        ...
      }
    }
    
    ....
    export default connect(mapStateToProps, mapDispatchToProps)(ContainerComponent);

And the child component:

    interface IChildComponentProps extends React.Props&lt;any&gt; {
      propToPass: any
    }

    class ChildComponent extends React.Component&lt;IChildComponentProps, any&gt; {
      ...
    }
    
    ....
    export default connect(mapStateToProps, mapDispatchToProps)(ChildComponent);

Obviously I&#39;m only including the basics and there is much more to both of these classes but I&#39;m still getting an error when I try and run what looks to me like valid code. The exact error that I&#39;m getting:

&gt;     TS2339: Property &#39;propToPass&#39; does not exist on type &#39;IntrinsicAttributes &amp; IntrinsicClassAttributes&lt;Component&lt;{}, ComponentState&gt;&gt; &amp; Readonly&lt;{ childr...&#39;.

When I first encountered the error I thought it was because I wasn&#39;t passing in an interface defining my props, but I created that (as you can see above) and it still doesn&#39;t work. I&#39;m wondering, is there something I&#39;m missing? 

When I exclude the ChildComponent prop from the code in the ContainerComponent, it renders just fine (aside from my ChildComponent not having a critical prop) but with it in the JSX Typescript refuses to compile it. I think it might have something to do with the connect wrapping based on [this article](http://www.mattgreer.org/articles/typescript-react-and-redux/), but the problems in that article occurred in the index.tsx file and were a problem with the provider, and I&#39;m getting my problems elsewhere.

Typescript + React/Redux: Property &quot;XXX&quot; does not exist on type &#39;IntrinsicAttributes &amp; IntrinsicClassAttributes

I&#39;ve the following snippet in my index.js

```
class App extends Component {
    render() {
        return ( &lt;div style = { styles.app } &gt;
            Welcome to React!
            &lt;/div&gt;
        )
    }
}
```
&lt;br&gt;
The code works, but every time I save (ctrl+s) visual studio format the jsx like that:

```
class App extends Component {
    render() {
        return ( &lt; div style = { styles.app } &gt;
            Welcome to React!
            &lt;
            /div&gt;
        )
    }
}
```

How can I solve this? thanks


Visual studio code changes format (React-JSX)

I&#39;m currently building a test app using React Native. The Image module thus far has been working fine.

For example, if I had an image named `avatar`, the below code snippet works fine.

    &lt;Image source={require(&#39;image!avatar&#39;)} /&gt;


But if I change it to a dynamic string, I get

    &lt;Image source={require(&#39;image!&#39; + &#39;avatar&#39;)} /&gt;

I get the error: 

&lt;pre&gt;
Requiring unknown module &quot;image!avatar&quot;. If you are sure the module is there, try restarting the packager.
&lt;/pre&gt;

Obviously, this is a contrived example, but dynamic image names are important. Does React Native not support dynamic image names? 


![React native error with dynamic image name][1]





  [1]: http://i.stack.imgur.com/I4UZB.png

React Native - Image Require Module using Dynamic Names

I&#39;m trying to set up react-router in an example application, and I&#39;m getting the following error:

    You should not use &lt;Link&gt; outside a &lt;Router&gt;

My app is set up like so:

### Parent component
&lt;!-- language-all: lang-jsx --&gt;

    const router = (
      &lt;div className=&quot;sans-serif&quot;&gt;
        &lt;Router histpry={browserHistory}&gt;
          &lt;Route path=&quot;/&quot; component={Main}&gt;
            &lt;IndexRoute component={PhotoGrid}&gt;&lt;/IndexRoute&gt;
            &lt;Route path=&quot;/view/:postId&quot; component={Single}&gt;&lt;/Route&gt;
          &lt;/Route&gt;
        &lt;/Router&gt;
      &lt;/div&gt;
    );
    
    render(&lt;Main /&gt;, document.getElementById(&#39;root&#39;));



### Child/`Main` component


    export default () =&gt; (
      &lt;div&gt;
        &lt;h1&gt;
          &lt;Link to=&quot;/&quot;&gt;Redux example&lt;/Link&gt;
        &lt;/h1&gt;
      &lt;/div&gt;
    )

Any idea what I&#39;m doing wrong here?

[Here&#39;s a Sandbox link](https://codesandbox.io/s/zwvjpx4pjx) to demonstrate the problem.


You should not use &lt;Link&gt; outside a &lt;Router&gt;

Is there any way to use components or HTML completion in Visual Studio Code? Because typing each letter manually is not good idea when we have classes like Bootstrap etc. For example completion as in Emmet: `ul&gt;li*2&gt;a`

    var React = require(&#39;react&#39;);
    
    var Header = React.createClass({
        render: function () {
            return (
                
                &lt;nav className=&quot;navbar navbar-defaullt&quot;&gt;
                    &lt;div className=&quot;container-fluid&quot;&gt;
                        &lt;a href=&quot;/&quot; className=&quot;navbar-brand&quot;&gt;
                            &lt;img width=&quot;50&quot; height=&quot;50&quot; src=&quot;images/logo.png&quot; alt=&quot;logo&quot; /&gt;
    			        &lt;/a&gt;
                        &lt;ul className=&quot;nav navbar-nav&quot;&gt;
                            &lt;li&gt;&lt;a href=&quot;/&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href=&quot;/#about&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
    		        &lt;/div&gt;
    	        &lt;/nav&gt;
                
                    );
                    }
                    });
    module.exports  = Header;

JSX or HTML autocompletion in Visual Studio Code

I have a very simple functional component as follows:

    import * as React from &#39;react&#39;;
    
    export interface AuxProps  { 
        children: React.ReactNode
     }
    
     
    const aux = (props: AuxProps) =&gt; props.children;
    
    export default aux;


And another component:

    import * as React from &quot;react&quot;;
    
    export interface LayoutProps  { 
       children: React.ReactNode
    }
    
    const layout = (props: LayoutProps) =&gt; (
        &lt;Aux&gt;
            &lt;div&gt;Toolbar, SideDrawer, Backdrop&lt;/div&gt;
            &lt;main&gt;
                {props.children}
            &lt;/main&gt;
        &lt;Aux/&gt;
    );
    
    export default layout;


I keep on getting the following error:

&gt; [ts]
JSX element type &#39;ReactNode&#39; is not a constructor function for JSX elements.
  Type &#39;undefined&#39; is not assignable to type &#39;ElementClass&#39;. [2605]

How do I type this correctly?


TypeScript and React - children type?

#Import_this

&lt;!-- language-all: lang-jsx --&gt;

    import {AppRegistry, Text, View, Button, StyleSheet} from &#39;react-native&#39;;

 

This my React Button code But style not working Hare ...

    &lt;Button
      onPress={this.onPress.bind(this)} 
      title={&quot;Go Back&quot;}
      style={{color: &#39;red&#39;, marginTop: 10, padding: 10}}
    /&gt;
Also I was try by this code 

    &lt;Button 
           containerStyle={{padding:10, height:45, overflow:&#39;hidden&#39;, 
           borderRadius:4, backgroundColor: &#39;white&#39;}}
           style={{fontSize: 20, color: &#39;green&#39;}} 
           onPress={this.onPress.bind(this)} title={&quot;Go Back&quot;}
          &gt; Press me!
    &lt;/Button&gt;


#Update Question:

Also I was try by This way..

 

    &lt;Button
    	onPress={this.onPress.bind(this)}
    	title={&quot;Go Back&quot;}
    	style={styles.buttonStyle}
    &gt;ku ka&lt;/Button&gt;

#Style

    const styles = StyleSheet.create({
        buttonStyle: {
            color: &#39;red&#39;,
            marginTop: 20,
            padding: 20,
            backgroundColor: &#39;green&#39;
        }
    });

But No out put: 
Screenshot  of my phone:-
[![Screenshot  of my phone:-][1]][1]


  [1]: https://i.stack.imgur.com/vaNeD.png

React-Native Button style not work

    class Game extends Component 
    {
      constructor() 
      {
        super()
        this.state = {
          speed: 0
        }
        //firebaseInit()
      }
      render()
      {
        return 
        (
          &lt;div&gt;
            &lt;h1&gt;The Score is {this.state.speed};&lt;/h1&gt;
          &lt;/div&gt;
        )
      }
    }
    
    export default Game;
I am new to React and for this code its giving this error

    Expected an assignment or function call and instead saw an expression  no-unused-expressions
Dont understand where getting wrong, please help

expected assignment or function call: no-unused-expressions ReactJS

I&#39;m super new to React and I&#39;m trying to get it set up for Meteor and piecing stuff together from other sources too. One of these other sources set up console logging for the app, but I&#39;m going the ES6/JSX way so just using their code wouldn&#39;t work for me (or it doesn&#39;t seem like it does).

Some code I found for logging is

    import Logger from &#39;simple-console-logger&#39;;
    Logger.configure({level: &#39;debug&#39;});

but I&#39;m seeing this error
[![cannot find module &#39;./dumy&#39;][1]][1]

I also tried using `react-logger` and `react-console-logger` to no avail. Here&#39;s my code for the latter, which I believe should work.

    import {Logger, ConsoleLogger} from &#39;react-console-logger&#39;;
    const myLogger = new Logger();
    export default class App extends Component {
        render() {
            myLogger.info(&#39;something witty&#39;);
        }
    }

However, `myLogger.info(&#39;...&#39;)` is making a call to `node_modules/react-console-logger/lib/Logger.js` which has it defined as

[![picture of code since copy-paste doesn&#39;t work][2]][2]

And `this.logger` is undefined, although I see it be defined above?

Does anyone know what I&#39;m doing wrong? It looks to me like the library has it wrong, but maybe it has something to do with me using JSX files instead of js? 


  [1]: https://i.stack.imgur.com/CfRJo.png
  [2]: https://i.stack.imgur.com/6XFZ0.png

Console logging for react?

There is something I find very confusing when working in `React.js`. 

There are plenty of examples available on internet which use `.js` files with `React` but many others use `.jsx` files. 

I have read about `JSX` files and my understanding is that they just let you write `HTML` tags within your `JavaScript`. 
But the same thing can be written in `JS` files as well. 

So what is the actual difference between `.js` and `.jsx` ?

ReactJS - .JS vs .JSX

I wanted to know if its possible to do nested if else if in ReactJS JSX?

I have tried various different ways and I am unable to get it to work.

I am looking for


    if (x) {
      loading screen
    } else {
      if (y) {
        possible title if we need it
      }
      main 
    }


I have tried this but I can not get it to render.  I have tried various ways.  It always breaks once I add the nested if.

    {
      this.state.loadingPage ? (
        &lt;div&gt;loading page&lt;/div&gt;
      ) : (
        &lt;div&gt;
          this.otherCondition &amp;&amp; &lt;div&gt;title&lt;/div&gt;
          &lt;div&gt;body&lt;/div&gt;
        &lt;/div&gt;
      );
    }



**Update**

I ended up choosing the solution to move this to renderContent and call the function.  Both of the answers did work though.  I think I may use the inline solution if it is for a simple render and renderContent for more complicated cases.

Thank you

How to do a nested if else statement in ReactJS JSX?

I want to define jsx like this:

    &lt;table style={{&#39;--length&#39;: array.lenght}}&gt;
       &lt;tbody&gt;
          &lt;tr&gt;{array}&lt;/tr&gt;
       &lt;/tbody&gt;
    &lt;/table&gt;

and I use --length in CSS, I also have cells that have --count that shows count using CSS pseudo selector (using the counter hack).

but typescript throws error:

    TS2326: Types of property &#39;style&#39; are incompatible.
      Type &#39;{ &#39;--length&#39;: number; }&#39; is not assignable to type &#39;CSSProperties&#39;.
        Object literal may only specify known properties, and &#39;&#39;--length&#39;&#39; does not exist in type &#39;CSSProperties&#39;.

is it possible to change type of style attribute to accept CSS variable (custom properties) or is there a way to force any on style object?

How to define css variables in style attribute in React and typescript

I am looking to create a stateless component who&#39;s `input` element can be validated by the parent component.

In my example below, I am running into a problem where the input `ref` is never being assigned to the parent&#39;s private `_emailAddress` property.

When `handleSubmit` is called, `this._emailAddress` is `undefined`. Is there something I&#39;m missing, or is there a better way to do this?

    interface FormTestState {
    	errors: string;
    }
    
    class FormTest extends React.Component&lt;void, FormTestState&gt; {
    	componentWillMount() {
    		this.setState({ errors: &#39;&#39; });
    	}
    
    	render(): JSX.Element {
    		return (
    			&lt;main role=&#39;main&#39; className=&#39;about_us&#39;&gt;				
    				&lt;form onSubmit={this._handleSubmit.bind(this)}&gt;
    					&lt;TextInput 
    						label=&#39;email&#39;
    						inputName=&#39;txtInput&#39;
    						ariaLabel=&#39;email&#39;
    						validation={this.state.errors}
    						ref={r =&gt; this._emailAddress = r}
    					/&gt;
    
    					&lt;button type=&#39;submit&#39;&gt;submit&lt;/button&gt;
    				&lt;/form&gt;
    			&lt;/main&gt;
    		);
    	}
    
    	private _emailAddress: HTMLInputElement;
    
    	private _handleSubmit(event: Event): void {
    		event.preventDefault();
    		// this._emailAddress is undefined
    		if (!Validators.isEmail(this._emailAddress.value)) {
    			this.setState({ errors: &#39;Please enter an email address.&#39; });
    		} else {
    			this.setState({ errors: &#39;All Good.&#39; });
    		}
    	}
    }
    
    const TextInput = ({ label, inputName, ariaLabel, validation, ref }: { label: string; inputName: string; ariaLabel: string; validation?: string; ref: (ref: HTMLInputElement) =&gt; void }) =&gt; (
    	&lt;div&gt;
    		&lt;label htmlFor=&#39;txt_register_first_name&#39;&gt;
    			{ label }
    		&lt;/label&gt;
    
    		&lt;input type=&#39;text&#39; id={inputName} name={inputName} className=&#39;input &#39; aria-label={ariaLabel} ref={ref} /&gt;
    		
    		&lt;div className=&#39;input_validation&#39;&gt;
    			&lt;span&gt;{validation}&lt;/span&gt;
    		&lt;/div&gt;
    	&lt;/div&gt;
    );

How can I attach to a stateless component&#39;s ref in React?

Unlike in webstorm, I&#39;m unable to comment JSX code out in `.js` files in the Visual Studio Code.

How to comment JSX code out in .js files in VSCode?

I want to call a function inside some embedded html. I tried the following but the function isn&#39;t called. Would this be the incorrect way of calling a function inside a render method? 


    import React, { Component, PropTypes } from &#39;react&#39;;
    
    export default class PatientTable extends Component {
          constructor(props) {
            super(props);
            this.state = { 
             checking:false
          };
            this.renderIcon = this.renderIcon.bind(this);
      }
    
      renderIcon(){
        console.log(&quot;came here&quot;)
        return(
          &lt;div&gt;Function called&lt;/div&gt;
        )
      }
    
      render() {
    
       return (
           &lt;div className=&quot;patient-container&quot;&gt;
    
           {this.renderIcon}      
    
          &lt;/div&gt;
       );
     }
    }

How to Call a Function inside a Render in React/Jsx

Using @types/react 16.8.2 and TypeScript 3.3.1.

I lifted this forward refs example straight from the [React documentation][1] and added a couple type parameters:

```js
const FancyButton = React.forwardRef&lt;HTMLButtonElement&gt;((props, ref) =&gt; (
  &lt;button ref={ref} className=&quot;FancyButton&quot;&gt;
    {props.children}
  &lt;/button&gt;
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef&lt;HTMLButtonElement&gt;();
&lt;FancyButton ref={ref}&gt;Click me!&lt;/FancyButton&gt;;
```

I get the following error in the last line under `FancyButton`: 

&gt; Type &#39;`{ children: string; ref: RefObject&lt;HTMLButtonElement&gt;; }`&#39; is not
&gt; assignable to type &#39;`IntrinsicAttributes &amp; RefAttributes&lt;HTMLButtonElement&gt;`&#39;.   Property &#39;`children`&#39; does not
&gt; exist on type &#39;`IntrinsicAttributes &amp; RefAttributes&lt;HTMLButtonElement&gt;`&#39;.ts(2322)

It would seem that the type definition for React.forwardRef&#39;s return value is wrong, not merging in the children prop properly. If I make `&lt;FancyButton&gt;` self-closing, the error goes away. The lack of search results for this error leads me to believe I&#39;m missing something obvious.


  [1]: https://reactjs.org/docs/forwarding-refs.html

Using a forwardRef component with children in TypeScript

I&#39;m struggling with following &quot;error&quot; in VSCode : 
```
Argument for &#39;--jsx&#39; option must be: &#39;preserve&#39;, &#39;react-native&#39;, &#39;react&#39;
```

Hence, react-scripts (create-react-app) automatically sets the ```jsx``` key to ```react-jsx``` value, when ```react``` value seems to work.

Actually, the code works perfectly and displays the page I want, but the IDE is underlining kinda everything as errors, saying :
```
Cannot use JSX unless the &#39;--jsx&#39; flag is provided.
```

Here is my tsconfig.json :

```
{
  &quot;compilerOptions&quot;: {
    &quot;target&quot;: &quot;es5&quot;,
    &quot;lib&quot;: [
      &quot;dom&quot;,
      &quot;dom.iterable&quot;,
      &quot;esnext&quot;
    ],
    &quot;allowJs&quot;: true,
    &quot;skipLibCheck&quot;: true,
    &quot;esModuleInterop&quot;: true,
    &quot;allowSyntheticDefaultImports&quot;: true,
    &quot;strict&quot;: true,
    &quot;forceConsistentCasingInFileNames&quot;: true,
    &quot;noFallthroughCasesInSwitch&quot;: true,
    &quot;module&quot;: &quot;esnext&quot;,
    &quot;moduleResolution&quot;: &quot;node&quot;,
    &quot;resolveJsonModule&quot;: true,
    &quot;isolatedModules&quot;: true,
    &quot;noEmit&quot;: true,
    &quot;jsx&quot;: &quot;react-jsx&quot;
  },
  &quot;include&quot;: [
    &quot;src&quot;
  ]
}

```

, and my package.json (default one provided by create-react-app + packages updated) :

```
{
  &quot;name&quot;: &quot;front-office&quot;,
  &quot;version&quot;: &quot;0.1.0&quot;,
  &quot;private&quot;: true,
  &quot;dependencies&quot;: {
    &quot;@testing-library/jest-dom&quot;: &quot;^5.11.6&quot;,
    &quot;@testing-library/react&quot;: &quot;^11.2.2&quot;,
    &quot;@testing-library/user-event&quot;: &quot;^12.2.2&quot;,
    &quot;@types/jest&quot;: &quot;^26.0.15&quot;,
    &quot;@types/node&quot;: &quot;^14.14.9&quot;,
    &quot;@types/react&quot;: &quot;^17.0.0&quot;,
    &quot;@types/react-dom&quot;: &quot;^17.0.0&quot;,
    &quot;bootstrap&quot;: &quot;^4.5.3&quot;,
    &quot;react&quot;: &quot;^17.0.1&quot;,
    &quot;react-bootstrap&quot;: &quot;^1.4.0&quot;,
    &quot;react-dom&quot;: &quot;^17.0.1&quot;,
    &quot;react-scripts&quot;: &quot;4.0.1&quot;,
    &quot;typescript&quot;: &quot;^4.1.2&quot;,
    &quot;web-vitals&quot;: &quot;^1.0.1&quot;
  },
  &quot;scripts&quot;: {
    &quot;start&quot;: &quot;react-scripts start&quot;,
    &quot;build&quot;: &quot;react-scripts build&quot;,
    &quot;test&quot;: &quot;react-scripts test&quot;,
    &quot;eject&quot;: &quot;react-scripts eject&quot;
  },
  &quot;eslintConfig&quot;: {
    &quot;extends&quot;: [
      &quot;react-app&quot;,
      &quot;react-app/jest&quot;
    ]
  },
  &quot;browserslist&quot;: {
    &quot;production&quot;: [
      &quot;&gt;0.2%&quot;,
      &quot;not dead&quot;,
      &quot;not op_mini all&quot;
    ],
    &quot;development&quot;: [
      &quot;last 1 chrome version&quot;,
      &quot;last 1 firefox version&quot;,
      &quot;last 1 safari version&quot;
    ]
  }
}

```

I&#39;m using the latest version of Typescript, and I updated all my packages with ```ncu```, closed/opened VSCode (works sometimes with tsconfig !) and nothing seems to resolve that.

I&#39;m pretty sure it&#39;s a VSCode problem, but I&#39;m running out of ideas about how to resolve that.

Any of you guys got ideas ?


Edit:

If you followed the above steps and VSCode still shows the &quot;*-jsx*&quot; error, make sure you have disabled the &#39;TypeScript God&#39; extension (and any other TS extension until the issue no longer appears).

Problem with Visual Studio Code using &quot;react-jsx&quot; as jsx value with create-react-app

I&#39;m trying to do something like the following in React JSX (where ObjectRow is a separate component):

    &lt;tbody&gt;
        for (var i=0; i &lt; numrows; i++) {
            &lt;ObjectRow/&gt;
        } 
    &lt;/tbody&gt;

I realize and understand why this isn&#39;t valid JSX, since JSX maps to function calls. However, coming from template land and being new to JSX, I am unsure how I would achieve the above (adding a component multiple times).



Loop inside React JSX

I am getting a warning on a React site I built

    ./src/components/layout/Navbar.js [1]   Line 31:  The href attribute requires a valid 
    address. Provide a valid, navigable address as the href value  jsx-a11y/anchor-is-valid

on the following code:

              &lt;p&gt;
                {isEmpty(profile.website) ? null : (
                  &lt;a
                    className=&quot;text-white p-2&quot;
                    href={profile.website}
                    target=&quot;#&quot;
                  &gt;
                    &lt;i className=&quot;fas fa-globe fa-2x&quot; /&gt;
                  &lt;/a&gt;
                )}
                {isEmpty(profile.social &amp;&amp; profile.social.twitter) ? null : (
                  &lt;a
                    className=&quot;text-white p-2&quot;
                    href={profile.social.twitter}
                    target=&quot;#&quot;
                  &gt;
                    &lt;i className=&quot;fab fa-twitter fa-2x&quot; /&gt;
                  &lt;/a&gt;
                )}
                {isEmpty(profile.social &amp;&amp; profile.social.facebook) ? null : (
                  &lt;a
                    className=&quot;text-white p-2&quot;
                    href={profile.social.facebook}
                    target=&quot;#&quot;
                  &gt;
                    &lt;i className=&quot;fab fa-facebook fa-2x&quot; /&gt;
                  &lt;/a&gt;
                )}
              &lt;/p&gt;

Even tho the warning appears only for the first link, the same warning occurs on the next link if I remove the first link temporarily or change the href of the first link to a static URL.

The links need to appear as just an icon.

I have tried things such as using a button (did not have the correct look), using a function to open the dynamic url, and trying to force the href to be a string by using `&#39;&#39; + {profile.website}`. Many other suggestions have not worked.

Is there a way to prevent the error, without changing the jsx-a11y rules? Is what I have done not a good pattern, or is it just a bug in React or JSX?



React site warning: The href attribute requires a valid address. Provide a valid, navigable address as the href value jsx-a11y/anchor-is-valid

In the official docs of React it mentions -  

&gt; If you’re familiar with React class lifecycle methods, you can think
&gt; of useEffect Hook as componentDidMount, componentDidUpdate, and
&gt; componentWillUnmount combined.

My question is - how can we use the `componentWillMount()` lifecyle method in a hook?

How to use componentWillMount() in React Hooks?

Given a simple component that renders its children:

    class ContainerComponent extends Component {
      static propTypes = {
        children: PropTypes.object.isRequired,
      }
    
      render() {
        return (
          &lt;div&gt;
          	{this.props.children}
          &lt;/div&gt;
        );
      }
    }
    
    export default ContainerComponent;

**Question: What should the propType of the children prop be?**

When I set it as an object, it fails when I use the component with multiple children:

    &lt;ContainerComponent&gt;
      &lt;div&gt;1&lt;/div&gt;
      &lt;div&gt;2&lt;/div&gt;
    &lt;/ContainerComponent&gt;

&gt; Warning: Failed prop type: Invalid prop `children` of type `array`
&gt; supplied to `ContainerComponent`, expected `object`.

If I set it as an array, it will fail if I give it only one child, i.e.: 

    &lt;ContainerComponent&gt;
      &lt;div&gt;1&lt;/div&gt;
    &lt;/ContainerComponent&gt;

&gt; Warning: Failed prop type: Invalid prop children of type object
&gt; supplied to ContainerComponent, expected array.


Please advise, should I just not bother doing a propTypes check for children elements?

ReactJs: What should the PropTypes be for this.props.children?

I am trying to fix this lint error at line `const def = (props) =&gt; {` in following sample code.

    const propTypes = {
    prop1: PropTypes.string,
    prop2: PropTypes.string,
    prop3: PropTypes.string,
    prop4: PropTypes.string,
    prop5: PropTypes.string,
    }
    
    const abc = (props) =&gt; {
    some code here }
    
    const def = (props) =&gt; {
    &lt;div&gt;
    &lt;div className=&quot; ..some classes..&quot;&gt;{abc}&lt;/div&gt;
    &lt;div className=&quot; ..some classes..&quot;&gt;{t(&#39;translation/something&#39;)}&lt;/div&gt;
    
    &lt;div ...&gt;
      &lt;someComponent 
        do something
      /&gt;
    
    if (some condition) {
    do this
    } else {
    do that
    }
    
    &lt;/div&gt;

    };

Any idea why i am getting this lint error?

React: Expected an assignment or function call and instead saw an expression

I know JSX can be very misleading because it looks like strings and it is not, thus the &quot;string&quot; term in the question, even if we are not really manipulating strings.

Here is a code example (wrong, obviously):

    let line = &lt;Line key={line.client_id} line={line}/&gt;;
    if(line.created_at) {
        return &lt;div className=&quot;date-line&quot;&gt;&lt;strong&gt;{line.created_at}&lt;/strong&gt;&lt;/div&gt; + line;
    } else {
        return chat_line;
    }

I have a line, and I want to &quot;concatenate&quot; some divs in front of it under certain conditions. What would be the proper syntax?
I&#39;ve tried parenthesis, brackets, plus sign... None of them seem to work...

thanks

How to concatenate two JSX fragment or variables or string and component (in Reactjs)?

I&#39;m building a React app, with create-react-app.

I got the following error when running ESLint:  
`8:3  error  &#39;document&#39; is not defined  no-undef.`

My app runs without error, but I got this ESLint error in 2 files.
See one of those `.jsx` files and my ESLint configuration.

index.jsx:

    import React from &#39;react&#39;;
    import ReactDOM from &#39;react-dom&#39;;
    import App from &#39;./App&#39;;
    import &#39;./index.css&#39;;

    ReactDOM.render(
      &lt;App /&gt;,
      document.getElementById(&#39;root&#39;),
    );

eslintrc.js:

    module.exports = {
      &quot;extends&quot;: &quot;airbnb&quot;,
      &quot;plugins&quot;: [
          &quot;react&quot;,
          &quot;jsx-a11y&quot;,
          &quot;import&quot;
      ],
      &quot;env&quot;: {
        &quot;jest&quot;: true
      }
    };

How can I fix this ? For the moment I will simply ignore both files ... but I&#39;d rather find a long term solution.

error &#39;document&#39; is not defined : eslint / React

I&#39;m using react and I&#39;m trying to display this error message if `this.state.message === &#39;failed&#39;`. But I&#39;m really not sure why this ternary operation isn&#39;t working. What am I doing wrong here?
```jsx
render() {
    ...
    &lt;div className=&quot;row&quot;&gt;
        return (this.state.message === &#39;failed&#39;) ? ( =&gt;{&quot; &quot;}
        {
            &lt;div className=&quot;alert alert-danger&quot; role=&quot;alert&quot;&gt;
                Something went wrong
            &lt;/div&gt;
        }
        )() : false; }
    &lt;/div&gt;
}
```

Right now its just displaying `return (this.state.message === &#39;failed&#39;) ? ( =&gt;` in the html

ternary operator in jsx to include html with react

I&#39;m trying to integrate TypeScript into our project and so far I stumbled upon one issue with [styled-components][1] library.

Consider this component

    import * as React from &quot;react&quot;;
    import styled from &quot;styled-components/native&quot;;
    import { TouchableOpacity } from &quot;react-native&quot;;
    
    // -- types ----------------------------------------------------------------- //
    export interface Props {
      onPress: any;
      src: any;
      width: string;
      height: string;
    }
    
    // -- styling --------------------------------------------------------------- //
    const Icon = styled.Image`
      width: ${(p: Props) =&gt; p.width};
      height: ${(p: Props) =&gt; p.height};
    `;
    
    class TouchableIcon extends React.Component&lt;Props&gt; {
      // -- default props ------------------------------------------------------- //
      static defaultProps: Partial&lt;Props&gt; = {
        src: null,
        width: &quot;20px&quot;,
        height: &quot;20px&quot;
      };
    
      // -- render -------------------------------------------------------------- //
      render() {
        const { onPress, src, width, height } = this.props;
        return (
          &lt;TouchableOpacity onPress={onPress}&gt;
            &lt;Icon source={src} width={width} height={height} /&gt;
          &lt;/TouchableOpacity&gt;
        );
      }
    }
    
    export default TouchableIcon;

Following line throws 3 errors, that are same in nature `&lt;Icon source={src} width={width} height={height} /&gt;`

&gt; Type {source: any; width: string; height: string;} is not assignable
&gt; to type IntrinsicAttributes ... Property &#39;onPress&#39; is missing in type
&gt; {source: any; width: string; height: string;}

Not entirely sure what this is and how to fix it, do I somehow need to declare these on `Icon` or something of this sort?

**EDIT:** typescript `v2.6.1`, styled-components `v2.2.3`

  [1]: https://www.styled-components.com/

All Jsx Solutions on Gang of Coders

Total of 42 Jsx Solutions