You need to clone the element and add the additional props using [`React.cloneElement`][1] e.g:

```js
const ClonedElementWithMoreProps = React.cloneElement(
  this.mainContent, 
  { anotherMessage: &quot;nice to meet ya!&quot; }
);
// now render the new cloned element?
```
  [1]: https://facebook.github.io/react/docs/top-level-api.html#react.cloneelement

If you don&#39;t want to use `React.cloneElement()`, you can use the following snippet:

    function AddExtraProps(Component, extraProps) {
        return &lt;Component.type {...Component.props} {...extraProps} /&gt;;
    }

`React.createElement()` takes either a string or a React class type as its first parameter, so that won&#39;t work if you&#39;re trying to clone an element.

Of course, [there&#39;s `React.cloneElement()` instead][1], which does a deep copy of another React element and can optionally provide new props.

    var foo = React.cloneElement(this.mainContent, {anotherMessage: &quot;nice to meet ya!&quot;});

Should work.

  [1]: https://facebook.github.io/react/docs/top-level-api.html#react.cloneelement

I&#39;m trying to create an auto-complete list that appears as you type, but disappears when you click elsewhere on the document. How do I detect that a form input is focused using Angular 2. Angular 1 has ng-focus, but I don&#39;t think Angular 2 supports that anymore.

    &lt;input id=&quot;search-box&quot; type=&quot;search&quot; class=&quot;form-control [(ngModel)]=query (keyup)=filter()&gt;
        &lt;div id=&quot;search-autocomplete&quot; *ngIf=&quot;filteredList.length &gt; 0&quot;&gt;
            &lt;ul *ngFor=&quot;#item of filteredList&quot; &gt;
                &lt;li &gt; &lt;a (click)=&quot;select(item)&quot;&gt;{{item}}&lt;/a&gt; &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;

By the way, I used this tutorial as [guidance][1].


  [1]: http://4dev.tech/2016/03/tutorial-creating-an-angular2-autocomplete/

Detect Input Focus Using Angular 2+

I&#39;m using Ubuntu 15.04. While running the following command:

    npm install fsevents
I&#39;m getting following error:

    npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
    npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.11
    npm WARN tutorial@1.0.0 No repository field.

Has anybody solved this?

Not compatible with your operating system or architecture: fsevents@1.0.11

I&#39;m trying to figure out how to clone an existing element with additional props.

For reference:

    this.mainContent = &lt;Hello message=&quot;Hello world!&quot; /&gt;

I attempted to do something like

    React.createElement(this.mainContent, Object.assign({}, 
       this.mainContent.props, { anotherMessage: &quot;nice to meet ya!&quot; }));

but it&#39;s not working. 

How would I accomplish this?

React: adding props to an existing component

I'm trying to figure out how to clone an existing element with additional props.
For reference:
<pre><code class="hljs language-ini">this.mainContent = &#x3C;Hello message="Hello world!" />
</code></pre>
I attempted to do something like
<pre><code class="hljs language-kotlin">React.createElement(this.mainContent, Object.assign({}, 
 this.mainContent.props, { anotherMessage: "nice to meet ya!" }));
</code></pre>
but it's not working.
How would I accomplish this?

On my Samsung Galaxy tab 4 (Android 4.4.2, Chrome: 49.0.2623.105) I ran into a situation where the keyCode is always 229. 

I&#39;ve setup a simple test for two situation

    &lt;div contenteditable=&quot;true&quot;&gt;&lt;/div&gt;
    &lt;input&gt;
    &lt;span id=&quot;keycode&quot;&gt;&lt;/span&gt;

script:

    $(&#39;div, input&#39;).on(&#39;keydown&#39;, function (e) {
        $(&#39;#keycode&#39;).html(e.keyCode);
    });
    

[DEMO][1]

Fortunately I can find posts about this, but I couldn&#39;t find one with a working solution. Someone suggested to use `keyup` instead or to use the `textInput` event, but that one is only fired on `blur`.

Now, to top it all, this doesn&#39;t happen with the default stock browser :(

Any help would be appreciated!

UPDATE: If it turns out that this is not possible I can still grab the char before the caret: [post][2]



  [1]: https://jsfiddle.net/ztu9d9j3/3/
  [2]: https://stackoverflow.com/questions/15157435/get-last-character-before-caret-position-in-javascript

keyCode on android is always 229

Simple question, but I&#39;m interested in the nuances here.

I&#39;m generating random booleans using the following method I came up with myself:

    const rand = Boolean(Math.round(Math.random()));

Whenever `random()` shows up, it seems there&#39;s always a pitfall - it&#39;s not truly random, it&#39;s compromised by something or other, etc.  So, I&#39;d like to know:

a) Is the above the best-practice way to do it? 

b) Am I overthinking things? 

c) Am I underthinking things?  

d) Is there a better/faster/elegant-er way I don&#39;t know of?

(Also somewhat interested if B and C are mutually exclusive.)

*Update*

If it makes a difference, I&#39;m using this for movement of an AI character.

JS generate random boolean

What are the differences between the following?

    type Foo = { 
        foo: string 
    };
    interface Foo {
       foo: string;
    }
    

In Typescript, what is the difference between type and interface?

I&#39;ve started learning React / Redux and stumbled on something that is probably a very basic question. Below are snippets from my app with some code removed for simplicity sake.

My state is described by an array of sites which is empty by default. Later reducer will have `LOAD_SITES` action to load a different set of sites whenever user paginates to a different page but for now it&#39;s doing nothing. React starts by rendering `PublishedSitesPage` which then renders `PublishedSitesBox` which then loops over data and renders individual sites. 

What I want to do is have it render everything with the default empty array and meanwhile initiate a &quot;load sites from server&quot; promise and once it resolves, dispatch `LOAD_SITES` action. What is the best way to make this call? I was thinking about either constructor of `PublishedSitesBox` or perhaps `componentDidMount`. But not sure if this would work - my concern is that I&#39;ll create an endless loop this way that will keep re-rendering. I guess I could prevent this endless loop in some way by having some other state param along the lines of &quot;haveRequestedInitialData&quot;. Another idea I had is to simply make this promise right after doing `ReactDOM.render()`. What is the best and cleanest way to do this?

    export default function sites(state = [], action) {
      switch (action.type) {
        default:
          return state;
      }
    }
    ...
    
    const publishedSitesPageReducer = combineReducers({
      sites
    });
    
    ReactDOM.render(
      &lt;Provider store={createStore(publishedSitesPageReducer)}&gt;
        &lt;PublishedSitesPage /&gt;
      &lt;/Provider&gt;,
      this.$view.find(&#39;.js-published-sites-result-target&#39;)[0]
    );
    
    ...
    
    export default function PublishedSitesPage() {
      return (
        &lt;PublishedSitesBox/&gt;
      );
    }
    
    ...
    
    function mapStateToProps(state) {
      return { sites: state.sites };
    }
    
    const PublishedSitesBox = connect(mapStateToProps)(({sites}) =&gt; {
      // render sites
    });

Where do I fetch initial data from server in a React Redux app?

Is it possible to combine reducers that are nested with the following structure:

	import &#39;user&#39; from ...
	import &#39;organisation&#39; from ...
	import &#39;auth&#39; from ...
	// ...

	export default combineReducers({
	  auth: {
	  	combineReducers({
	  		user,
	  		organisation,  
	  	}),
	  	auth,
	  },
	  posts,
	  pages,
	  widgets,
	  // .. more state here
	});

Where the state has the structure:

	{
		auth: {
			user: {
				firstName: &#39;Foo&#39;,
				lastName: &#39;bar&#39;,
			}
			organisation: {
				name: &#39;Foo Bar Co.&#39;
				phone: &#39;1800-123-123&#39;,
			},
			token: 123123123,
			cypher: &#39;256&#39;,
			someKey: 123,
		}
	}


Where the `auth` reducer has the structure:

	{
		token: 123123123,
		cypher: &#39;256&#39;,
		someKey: 123,	
	}

so maybe the spread operator is handy? `...auth` not sure :-(


Nested redux reducers

How can I style MUI `Tooltip` text? The default tooltip on hover comes out black with no text-wrap. Is it possible to change the background, color etc? Is this option even available?



How to style MUI Tooltip?

I&#39;m coming to react from using angular and I&#39;m trying to figure out a good react alternative to angular&#39;s ng-if directive where I render or dont render an element based on a condition. Take this code for example. I&#39;m using typescript (tsx) btw but that shouldn&#39;t matter much.

    &quot;use strict&quot;;
    
    import * as React from &#39;react&#39;;
    
    interface MyProps {showMe: Boolean}
    interface MyState {}
    
    class Button extends React.Component &lt;MyProps, MyState&gt;{
      constructor(props){
        super(props);
        this.state = {};
      }
    
      render(){
        let button;
        if (this.props.showMe === true){
           button = (
            &lt;button type=&quot;submit&quot; className=&quot;btn nav-btn-red&quot;&gt;SIGN UP&lt;/button&gt;
          )
        } else {
          button = null;
        }
        return button;
    
    }
    }
    export default Button;

This solution works, but is there another way that&#39;s generally used to achieve this effect? I&#39;m just sort of guessing

What is the equivalent to ng-if in react.js?

How do I access one component&#39;s state in another component? Below is my code and I&#39;m trying to access the state of component `a` in component `b`.

&lt;!-- language: lang-js --&gt;

    var a = React.createClass({
        getInitialState: function () {
            return {
                first: &quot;1&quot;
            };
        },

        render: function () {
            // Render HTML here.
        }  
    });

    var b = React.createClass({
        getInitialState: function () {
            return {
                second: a.state.first
            };
        },
        
        render: function () {
            // Render HTML here.
        }  
    });

But I&#39;m not getting anything.

Content Type	Original Author	Original Content on Stackoverflow
Question	zoopz	View Question on Stackoverflow
Solution 1 - Javascript	Salakar	View Answer on Stackoverflow
Solution 2 - Javascript	Eugene Ihnatsyeu	View Answer on Stackoverflow
Solution 3 - Javascript	jered	View Answer on Stackoverflow

React: adding props to an existing component

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Solution 2 - Javascript

Solution 3 - Javascript

Not compatible with your operating system or architecture: [email protected]

Detect Input Focus Using Angular 2+

Attributions