title: ReactJs re-use same component but with different styles
body: <p>I have a button component that I wish to re-use in reactJs, I want multiple of the same component to be rendered but using different styles and to use a different style when the button is pressed and also mouse HoverOver</p>
  
  <p>The button component is: -</p>
  
  <pre><code>import React, { Component } from 'react';
  //import './Buttons.css'
  const buttons = (props) =&gt; {
  
  
  
      return (
        &lt;div className=""&gt;
  
          &lt;button id="buttons" class="-"&gt; {props.name}&lt;/button&gt;
  
          &lt;/div&gt;
  
      );
    }
  
  
  export default buttons;
  </code></pre>
  
  <p>The main App component holds a state which then the state displays the name of the Button, which I am sure there is a better way of doing this.</p>
  
  <p>Also I have made multiple of a button component and I can apply css styles that way but I am sure this is not the correct way.</p>
  
  <pre><code>class App extends Component {
  
  
  
    state = {
      name: [
        { button: 'Login' },
        { buttonTwo: 'Sign Up' },
        { buttons: 'Login' }
      ],
  
    }
    render() {
  
      const style = {
        backgroundColor: 'blue',
        font: 'inherit',
        border: '1px solid red',
        padding: '8px',
  
      };
  
  
  
      var pressed = true
      function toggle() {
        pressed = !pressed
  
        //When pressed Styles change
      }
  
      return (
        &lt;div className="App"&gt;
  
         {/* &lt;Right /&gt;  Temp Disabled*/}
          &lt;span&gt;&lt;Button pressed={pressed} defaultPressed={true} pressedStyle={{color: 'blue'}}
          name={this.state.name[0].button} /&gt;&lt;/span&gt;
          &lt;span&gt;&lt;Button name={this.state.name[1].buttonTwo} /&gt;&lt;/span&gt;
  
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>I eventually aim to create a Log in section so these buttons will be part of that.</p>