You can extend the style keeping the original styles of the component from bootstrap. You will find more documentation on using third party libraries like react bootstrap with styled-components [here][1]. 

    const StyledButton = styled(Button)`
      color: palevioletred;
	  font-size: 1em;
	  margin: 1em;
	  padding: 0.25em 1em;
	  border: 2px solid palevioletred;
	  border-radius: 3px;
    `;

Here is a sandbox for reference: https://codesandbox.io/s/2vpm40qk90
  [1]: https://www.styled-components.com/docs/basics#styling-any-components

I&#39;d like to offer a better alternative and approach.

I have been using react-bootstrap before and we have found that the current implementation was not porting bootstrap into react entirely and we still needed to rely on external files such as CSS/Fonts which is not styled-components philosophy and best practice. 

Considering styled-components offer the css interface, we ported bootstrap 4 with best ES6 practices in a project called [bootstrap-styled](https://github.com/bootstrap-styled/bootstrap-styled).

This Twitter Bootstrap [v4](https://github.com/bootstrap-styled/v4) implementation of bootstrap is fully implemented for styled-components without a once of CSS or extra files.

This gives several benefits starting with a full js api, theming, modularity and reusability.

To override styles, it can be done through the `&lt;ThemeProvider /&gt;` or using `props.theme` on [any component](https://github.com/bootstrap-styled/v4/issues/109#issuecomment-481099255).  We also export a [`&lt;BootstrapProvider /&gt;`](https://github.com/bootstrap-styled/provider) component that include `&lt;ThemeProvider /&gt;` and provide bootstrap class utilities such as `.d-none`, etc... in it&#39;s scope.

You can see a [demo here](https://bootstrap-styled.github.io/v4/#/UI%20Components/Components/Button)


All I could find was this from [the docs][1]:

&gt; Additionally, `inventory_hostname` is the name of the hostname as configured in Ansible’s inventory host file. This can be useful for when you don’t want to rely on the discovered hostname `ansible_hostname` or for other mysterious reasons. If you have a long FQDN, `inventory_hostname_short` also contains the part up to the first period, without the rest of the domain.

Is there any actual difference between `inventory_hostname` and `ansible_hostname` variables in Ansible? If so, then which one should I use and when?

  [1]: http://docs.ansible.com/ansible/latest/playbooks_variables.html#magic-variables-and-how-to-access-information-about-other-hosts

What&#39;s the difference between inventory_hostname and ansible_hostname

So let&#39;s say we have a code block that we want to execute 70% of times and another one 30% of times.

    if(Math.random() &lt; 0.7)
        70percentmethod();
    else
        30percentmethod();

Simple enough. But what if we want it to be easily expandable to say, 30%/60%/10% etc.? 
Here it would require adding and changing all the if statements on change which isn&#39;t exactly great to use, slow and mistake inducing.

So far I&#39;ve found large switches to be decently useful for this use case, for example:

    switch(rand(0, 10)){
        case 0:
        case 1:
        case 2:
        case 3:
        case 4:
        case 5:
        case 6:
        case 7:70percentmethod();break;
        case 8:
        case 9:
        case 10:30percentmethod();break;
    }

Which can be very easily changed to:

    switch(rand(0, 10)){
        case 0:10percentmethod();break;
        case 1:
        case 2:
        case 3:
        case 4:
        case 5:
        case 6:
        case 7:60percentmethod();break;
        case 8:
        case 9:
        case 10:30percentmethod();break;
    }

But these have their drawbacks as well, being cumbersome and split onto a predetermined amount of divisions.

Something ideal would be based on a &quot;frequency number&quot; system I guess, like so:

    (1,a),(1,b),(2,c) -&gt; 25% a, 25% b, 50% c

then if you added another one:

    (1,a),(1,b),(2,c),(6,d) -&gt; 10% a, 10% b, 20% c, 60% d

So simply adding up the numbers, making the sum equal 100% and then split that.

I suppose it wouldn&#39;t be that much trouble to make a handler for it with a customized hashmap or something, but I&#39;m wondering if there&#39;s some established way/pattern or lambda for it before I go all spaghetti on this.

Coding pattern for random percentage branching?

Is there a way to use [styled-components][1] together with [react-bootstrap][2]? react-bootstrap exposes `bsClass`properties instead of `className` for their component which seems to be incompatible with styled-components.

Any experiences?


  [1]: http://styled-components.com
  [2]: https://react-bootstrap.github.io/

Styled-components and react-bootstrap?

<p>Is there a way to use <a href="http://styled-components.com" target="_blank" rel="noopener noreferrer">styled-components</a> together with <a href="https://react-bootstrap.github.io/" target="_blank" rel="noopener noreferrer">react-bootstrap</a>? react-bootstrap exposes <code>bsClass</code>properties instead of <code>className</code> for their component which seems to be incompatible with styled-components.</p>
<p>Any experiences?</p>


React Router Pass Param to Component

Using React on the frontend with a RESTful API as backend and authorisation by a JSON Web Token (JWT), how do we handle sessions? For example after login, I get a JWT token from REST. If I save it to localStorage I am vulnerable to XSS, if I save it to cookies, same problems except I set cookies to HttpOnly, but React can&#39;t read HttpOnly Cookies (I need to read cookie to take JWT from it, and use this JWT with REST requests), also I didn&#39;t mention the Cross Site Request Forgery (CSRF) problem. If you&#39;re using REST as backend, you can&#39;t use CSRF Tokens.

As a result, React with REST seems like a bad solution and I need to rethink my architecture. Is it possible to offer your users a secure React application that handles all business logic on the REST API side without fear of losing their data?

**Update:**

As far as I understood, it is possible to do this:

1. React makes an AJAX call to the REST API
2. React gets a JWT token from the REST API
3. React writes HttpOnly cookie
4. Because React can&#39;t read HttpOnly cookies, we use it as-is in all our REST calls where we need authentication
6. The REST API calls to check the XMLHttpRequest header, which is some kind of CSRF protection
7. The REST API side checks for cookie, reads JWT from it and does stuff

I lack theoretical knowledge here. The logic looks pretty secure, but I still need an answer to my questions and approve of this &quot;workflow&quot;.

React frontend and REST API, CSRF

I am using react. I want to add a line break `&lt;br&gt;` between strings

&#39;No results&#39; and  &#39;Please try another search term.&#39;.

 I have tried `&#39;No results.&lt;br&gt;Please try another search term.&#39;`

but it does not work, I need to add the `&lt;br&gt;` in the html.

Any ideas how to solve it?

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

       render() {
           let data = this.props.data;
           let isLoading = this.props.isLoading;
           let isDataEmpty = Object.entries(data).length === 0;
           let movieList = isLoading ? &lt;Loader /&gt; : isDataEmpty ? &#39;No results. Please try another search term.&#39; :
               Object.entries(data).map((movie, index) =&gt; &lt;MovieTile key={index} {...movie[1]} /&gt;);
           return (
               &lt;div className=&#39;movieList&#39;&gt;{movieList}&lt;/div&gt;
           );
       }



&lt;!-- end snippet --&gt;



How to add a &lt;br&gt; tag in reactjs between two strings?

I am taking an input from the user of the card number and wants that the length entered by user must not be less than and more than 12. Here is the declaration of my textfield.

    
    &lt;TextField
        id=&quot;SigninTextfield&quot;
        label=&quot;Aadhaar number&quot;
        id=&quot;Aadhar&quot;
        lineDirection=&quot;center&quot;
        required={true}
        type=&quot;number&quot;
        maxLength={12}
        style={styles.rootstyle}
        erorText=&quot;Please enter only 12 digits number&quot;
    /&gt;

Now I am not understanding whether to use javascript or any event handler for restricting the length.

Put length constraint in a TextField in react js

I&#39;m making an API call using Axios in a React Web app. However, I&#39;m getting this error in Chrome:

&gt; ```none
&gt; XMLHttpRequest cannot load
&gt; https://example.restdb.io/rest/mock-data. No
&gt; &#39;Access-Control-Allow-Origin&#39; header is present on the requested
&gt; resource. Origin &#39;http://localhost:8080&#39; is therefore not allowed
&gt; access. 
&gt;```
```js
{
    axios
      .get(&quot;https://example.restdb.io/rest/mock-data&quot;, {
        headers: {
          &quot;x-apikey&quot;: &quot;API_KEY&quot;,
        },
        responseType: &quot;json&quot;,
      })
      .then((response) =&gt; {
        this.setState({ tableData: response.data });
      });
}
```
I have also read several answers on Stack Overflow about the same issue, titled `Access-Control-Allow-Origin` but still couldn&#39;t figure out how to solve this. I don&#39;t want to use an extension in Chrome or use a temporary hack to solve this. Please suggest the standard way of solving the above issue.


After trying out few answers I have tried with this,
```js
headers: { 
  &#39;x-apikey&#39;: &#39;59a7ad19f5a9fa0808f11931&#39;,
  &#39;Access-Control-Allow-Origin&#39; : &#39;*&#39;,
  &#39;Access-Control-Allow-Methods&#39;:&#39;GET,PUT,POST,DELETE,PATCH,OPTIONS&#39;,
},
```
Now I get the error as,

&gt; ```none
&gt;Request header field Access-Control-Allow-Origin is not
&gt; allowed by Access-Control-Allow-Headers in preflight response 
&gt;```

Access Control Origin Header error using Axios

I am trying to create a simple Webapp using ReactJS, and I wanted to use the `Navbar` provided by React-Bootstrap. 

I created a `Navigation.js` file containing a class `Navigation` to separate the `Navbar` and the Routing from the `App.js` file. However, both parts do not seem to work. When I load the page, it is just empty, there is no Navbar. Can anyone spot a mistake?

Navigation.js:

    import React, { Component } from &#39;react&#39;;
    import { Navbar, Nav, Form, FormControl, Button, NavItem } from &#39;react-bootstrap&#39;;
    import { Switch, Route } from &#39;react-router-dom&#39;;
    import { Home } from &#39;./Page&#39;;
    
    class Navigation extends Component {
        render() {
            return (
                &lt;div&gt;
                    &lt;div&gt;
                        &lt;Navbar&gt;
                            &lt;Navbar.Brand href=&quot;/&quot;&gt;React-Bootstrap&lt;/Navbar.Brand&gt;
                            &lt;Navbar.Collapse&gt;
                                &lt;Nav className=&quot;mr-auto&quot;&gt;
                                    &lt;NavItem eventkey={1} href=&quot;/&quot;&gt;
                                        &lt;Nav.Link href=&quot;/&quot;&gt;Home&lt;/Nav.Link&gt;
                                    &lt;/NavItem&gt;
                                &lt;/Nav&gt;
                                &lt;Form inline&gt;
                                    &lt;FormControl type=&quot;text&quot; placeholder=&quot;Search&quot; className=&quot;mr-sm-2&quot; /&gt;
                                    &lt;Button variant=&quot;outline-success&quot;&gt;Search&lt;/Button&gt;
                                &lt;/Form&gt;
                            &lt;/Navbar.Collapse&gt;
                        &lt;/Navbar&gt;
                    &lt;/div&gt;
                    &lt;div&gt;
                        &lt;Switch&gt;
                            &lt;Route exact path=&#39;/&#39; component={Home} /&gt;
                            &lt;Route render={function () {
                                return &lt;p&gt;Not found&lt;/p&gt;
                            }} /&gt;
                        &lt;/Switch&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            );
        }
    }
    
    export default Navigation;

App.js:

    import React, { Component } from &#39;react&#39;;
    import Navigation from &#39;./components/routing/Navigation&#39;;
    
    
    
    class App extends Component {
      render() {
        return (
          &lt;div id=&quot;App&quot;&gt;
            &lt;Navigation /&gt;
          &lt;/div&gt;
        );
      }
    }
    
    export default App;

I tried using a `NavItem` containing a `LinkContainer` from `react-router-bootstrap` already, which led to the same result. 

Just for completeness, Page.js:

    import React, { Component } from &#39;react&#39;;
    import { Link } from &#39;react-router-dom&#39;;
    
    export const Page = ({ title }) =&gt; (
        &lt;div className=&quot;App&quot;&gt;
          &lt;div className=&quot;App-header&quot;&gt;
            &lt;h2&gt;{title}&lt;/h2&gt;
          &lt;/div&gt;
          &lt;p className=&quot;App-intro&quot;&gt;
            This is the {title} page.
          &lt;/p&gt;
          &lt;p&gt;
            &lt;Link to=&quot;/&quot;&gt;Home&lt;/Link&gt;
          &lt;/p&gt;
          &lt;p&gt;
            &lt;Link to=&quot;/about&quot;&gt;About&lt;/Link&gt;
          &lt;/p&gt;
          &lt;p&gt;
            &lt;Link to=&quot;/settings&quot;&gt;Settings&lt;/Link&gt;
          &lt;/p&gt;
        &lt;/div&gt;
    );
    
    
    export const About = (props) =&gt; (
        &lt;Page title=&quot;About&quot;/&gt;
    );
      
    export  const Settings = (props) =&gt; (
        &lt;Page title=&quot;Settings&quot;/&gt;
    );
    
    export const Home = (props) =&gt; (
        &lt;Page title=&quot;Home&quot;/&gt;
    );



ReactJS Bootstrap Navbar and Routing not working together

I found two different bootstraps for reactjs 

 1. npm install --save reactstrap react react-dom
 2. npm install react-bootstrap bootstrap

What is the basic and main difference between both?

What is difference between reactstrap and react-bootstrap?

After import the Bootstrap and Jquery this error is showning when compiling.

    import React from &#39;react&#39;;
    import ReactDOM from &#39;react-dom&#39;;
    import App from &#39;./App&#39;;
    import &#39;bootstrap/dist/css/bootstrap.css&#39;;
    import &#39;./index.css&#39;;

    global.jQuery = require(&#39;jquery&#39;);
    require(&#39;bootstrap&#39;);
    



How to fix this error : &quot; Module not found :can&#39;t resolve popper.js &quot;

Ordinarily, when using pure CSS, I have a style sheet that contains:

    html {
        height: 100%;
    }
    
    body {
        font-size: 14px;
    }

When using `styled-components` in my React project, how do I set styles for the `html` or `body` tags? Do I maintain a separate CSS file just for this purpose?

styled-components - how to set styles on html or body tag?

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/

Using styled-components with props and TypeScript

I&#39;m trying to build my first portfolio website and got stuck in routing using react-router-dom 4.2.2 and styled-components 2.2.3. 

error message: **You should not use Route or withRouter() outside a Router**

I also try using Link instead of NavLink but got error too(**You should not use Link outside a Router**)

Someone help me please.

**navigationBar.js**

    import React, { Component } from &#39;react&#39;;
    import { NavigationContainer, NavItem } from &#39;./navigationBar.style&#39;;

    class NavigationBar extends Component {
      render() {
        return (
          &lt;NavigationContainer&gt;
            &lt;NavItem to=&quot;/&quot;&gt;Home&lt;/NavItem&gt;
            &lt;NavItem to=&quot;/projects&quot;&gt;Project&lt;/NavItem&gt;
          &lt;/NavigationContainer&gt;
        );
      }
    }

    export default NavigationBar;

**navigationBar.style.js**
    
    import styled from &#39;styled-components&#39;;
    import { Flex, Div } from &#39;theme/grid&#39;;
    import { NavLink } from &#39;react-router-dom&#39;;

    export const NavigationContainer = styled(Flex)`
      position: fixed;
      right: 20px;
      top: 0.5em;
      font-size: 1em;  
    `;
    export const NavItem = styled(NavLink)`
      position: relative;
      padding-left: 10px;
      cursor: pointer;
    `;



You should not use Route or withRouter() outside a Router when using react-router 4 and styled-component in react

How can I use conditional rendering in styled-components to set my button class to active using styled-components in React? 

In css I would do it similarly to this:


&lt;!-- language: lang-html --&gt;

    &lt;button className={this.state.active &amp;&amp; &#39;active&#39;}
          onClick={ () =&gt; this.setState({active: !this.state.active}) }&gt;Click me&lt;/button&gt;


In styled components if I try to use &#39;&amp;&amp;&#39; in the classname it doesn&#39;t like it.

    import React from &#39;react&#39;
    import styled from &#39;styled-components&#39;
    
    const Tab = styled.button`
      width: 100%;
      outline: 0;
      border: 0;
      height: 100%;
      justify-content: center;
      align-items: center;
      line-height: 0.2;
    `
    
    export default class Hello extends React.Component {
      constructor() {
        super()
        this.state = {
          active: false
        }  
        this.handleButton = this.handleButton.bind(this)
    }
      
      handleButton() {
        this.setState({ active: true })
      }
      
      render() {
         return(
           &lt;div&gt;
             &lt;Tab onClick={this.handleButton}&gt;&lt;/Tab&gt;
           &lt;/div&gt;
         )
      }}

conditional rendering in styled components

trying to port some code from jss to styled-components,
jss code looks something like:

    //...
    const styles = {
      myStyles: {
        color: &#39;green&#39;
      }
    }
    
    const {classes} = jss.createStyleSheet(styles).attach()
    
    export default function(props) {
      return (
         &lt;div&gt;
           &lt;Widget1 className={classes.myStyles}/&gt;
           &lt;Widget2 className={classes.myStyles}/&gt;
         &lt;/div&gt;
      )
    }

my question is what would be the idiomatic way to accomplish this sharing of the same styles across multiple components?

Content Type	Original Author	Original Content on Stackoverflow
Question	jpfollenius	View Question on Stackoverflow
Solution 1 - Reactjs	Agney	View Answer on Stackoverflow
Solution 2 - Reactjs	Dimitri Kopriwa	View Answer on Stackoverflow

Styled-components and react-bootstrap?

Reactjs Problem Overview

Reactjs Solutions

Solution 1 - Reactjs

Solution 2 - Reactjs

Coding pattern for random percentage branching?

What's the difference between inventory_hostname and ansible_hostname

Attributions