Question

How to use inline style to element in React JS

Answer 1

// counter.jsx

import React, { Component } from "react";

class Counter extends Component {
  state = {
    total: 895
  };

  render() {
    return (
      <React.Fragment>
        <span style={ {fontSize: 16} } className="badge badge-primary m-2">
          Render Dynamically With bootstrap.css and inline Style: {this.getTotal()}
        </span>

      </React.Fragment>
    );
  }

  getTotal() {
    const { total } = this.state;
    return total === 0 ? "Zero" : total;
  }
}

export default Counter;

// index.js 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.css';
import Counter from './components/counter'


ReactDOM.render( 
  <Counter />,
  document.getElementById('root')
);

serviceWorker.unregister();


/*
run:
 
Render Dynamically With bootstrap.css and inline Style: 895
 
*/

 

70+ SQL courses for beginners and professionals