title: Conditional rendering react to display components
body: <p>i have to display 2 kinds of rendering one with css another without css</p>
  
  <pre><code>class SearchSection extends Component {
    constructor(props) {
      super(props);
      this.state = {
        input: null,
        pathName: "/rule-builder"
      };
    }
  
    handleChange = e =&gt; {
      e.preventDefault();
      this.setState({ input: e.target.value });
    };
  
    render() {
      const handlepathName = window.location.pathname;
      console.log(handlepathName);
  
      return (
        &lt;div&gt;
          &lt;div className="search-section"&gt;
            &lt;input
              type="text"
              className="form-control"
              placeholder={this.props.placeholder || "Search lists of values ..."}
              value={this.state.input}
              onChange={this.handleChange}
            /&gt;
            &lt;span className="search-icon"&gt;
              &lt;img src={images.SEARCH_ICON} alt="icon" title="search" /&gt;
            &lt;/span&gt;
          &lt;/div&gt;
          &lt;div className="category-scroll"&gt;
            {this.props.render &amp;&amp; this.props.render(this.state.input)}
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default SearchSection;
  </code></pre>
  
  <p>i want to conditionally render that if page doesn't match that link i have render page with this <code>&lt;div className="category-scroll"&gt;</code>, if its matches then without <code>&lt;div className="category-scroll"&gt;</code> this line</p>