In the example below, the is rendered depending on the value of the prop called warn. If the value of the prop is false, then the component does not render:

function WarningBanner(props) {
  if (!props.warn) {    return null;  }
  return (
    <div className="warning">
      Warning!
    </div>
  );
}

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showWarning: true};
    this.handleToggleClick = this.handleToggleClick.bind(this);
  }

  handleToggleClick() {
    this.setState(state => ({
      showWarning: !state.showWarning
    }));
  }

  render() {
    return (
      <div>
        <WarningBanner warn={this.state.showWarning} />        <button onClick={this.handleToggleClick}>
          {this.state.showWarning ? 'Hide' : 'Show'}
        </button>
      </div>
    );
  }
}

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

Sample code :


shouldComponentUpdate(nextProps, nextState) {
  return <enter_your_condition_to_be_true>; // else false
}

In the Statistics component the setAllowToggle and is called with true or false as per the condition.


var Statistics = React.createClass({
    fetchStatistics: function() {
        let url = "https://localhost/statistics";

        fetch(url)
        .then(data => {
            if (data) {
                // Disable click for <Toggle> button
                this.props.allowToggle(false);
            } else {
                // Enable click for <Toggle> button
                this.props.allowToggle(true);
            }
        })
        .catch((error) => {
            console.log('error', error);
        });
    },

    render: function(){
        return(
            <div>
                ...
            </div>
        );
    }

});

You can access the match data using a custom hook from react-router. All you need to do is


import { useRouteMatch } from "react-router-dom";

function App() {
  let match = useRouteMatch("/reminder");

  // Do whatever you want with the match...
  return (
<>
  <Switch>
    <Route path="/reminder" component={Reminder} exact />
  </Switch>
  {!match && <Navigation />} <---Conditional rendering
  <MainContent>
    <Router>
      <Route path={"/"} component={Dashboard} exact />
    </Router>
  </MainContent>
</>
  );
    }

Recommend

React Conditional Rendering Inline If-Else with Conditional Operator

React Conditional Rendering Inline If with Logical && Operator

React Conditional Rendering Element Variables

React Conditional Rendering

React Composition vs Inheritance Specialization

React Composition vs Inheritance Containment

React Using the State Hook Recap Tip: Using Multiple State Variables

React Using the State Hook Recap Tip: What Do Square Brackets Mean?

React Using the State Hook Recap

React Using the State Hook Updating State

React Using the State Hook Reading State

React Using the State Hook Declaring a State Variable

React Using the State Hook What’s a Hook?

React Using the State Hook Hooks and Function Components

React Using the State Hook Equivalent Class Example

React Using the State Hook

React Handling Events Passing Arguments to Event Handlers

React Handling Events

React Hello World

React Rules of Hooks Explanation

React Rules of Hooks ESLint Plugin

React Introducing Hooks

ReactDOMServer Reference renderToStaticNodeStream()

ReactDOMServer Reference renderToNodeStream()

ReactDOMServer Reference renderToStaticMarkup()

ReactDOMServer Reference renderToString()

ReactDOMServer

React Testing Recipes Multiple Renderers

React Testing Recipes Snapshot Testing

React Testing Recipes Timers

React Testing Recipes Events

React Testing Recipes Mocking Modules

React Testing Recipes Data Fetching

React Testing Recipes Rendering

React Testing Recipes act()

React Testing Recipes Setup/Teardown

React Rendering Elements Updating the Rendered Element

React Rendering Elements Rendering an Element into the DOM

React Rendering Elements

React Component State What is the difference between passing an object or a function in setState?

React Component State Why is setState giving me the wrong value?

React Refs and the DOM Callback Refs

React Refs and the DOM Accessing Refs Refs and Function Components

React Refs and the DOM Accessing Refs Adding a Ref to a Class Component

React Refs and the DOM Accessing Refs Adding a Ref to a DOM Element

React Refs and the DOM Accessing Refs

React Refs and the DOM Creating Refs

File Structure Is there a recommended way to structure React projects? Grouping by file type

File Structure Is there a recommended way to structure React projects? Grouping by features or routes

Glossary of React Terms Components props.children

Glossary of React Terms Components props

Glossary of React Terms Components

Glossary of React Terms Elements

Glossary of React Terms JSX

React Code-Splitting Named Exports

React Code-Splitting Route-based code splitting

Code-Splitting React.lazy Error boundaries

Code-Splitting React.lazy

React Code-Splitting import()

React Code-Splitting Bundling Example