Question

How to conditionally render elements in React JS

Answer 1

// counter.jsx

import React, { Component } from "react";

class Counter extends Component {
  state = {
    total: 996,
    items: ["react", "javascript", "nodejs"]
  };

  renderItems() {
    if (this.state.items.length === 0) return <p>No Items</p>;

    return (
      <ul>
        {this.state.items.map(items => (
          <li key={items}>{items}</li>
        ))}
      </ul>
    );
  }

  render() {
    return <React.Fragment>{this.renderItems()}</React.Fragment>;
  }
}

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:

react
javascript
nodejs
 
*/

 

70+ SQL courses for beginners and professionals