How to hide a component in react?

Question

I have two components App component and the Component2

import Component2 from './Component2';
  
class App extends Component {  
  
    state={data:""}
  
    changeState = () => {  
      this.setState({data:`state/props of parent component 
      is send by onClick event to another component`}); 
         }; 
  
    render(){   
        return (     
            <div className="App">  
                <Component2 data={this.state.data} />   
                <div className="main-cointainer">
                    <h2>Compnent1</h2> 
          <button  onClick={this.changeState} type="button"> 
             Send state 
          </button>    
                </div>
            </div>   
        );          
    }}
  
    export default App;

and the Component2.js

const Component2 = (props) => {
    return (
        <div className="main-cointainer">
            <h2>Compnent2</h2> 
              
<p>{props.data} </p>
  
        </div>
    )
}
  
export default Component2;

Here I am passing the data from App component to the Component2 component . What I want is to hide the Component2 from being rendered while passing the data from App component to the Component2 component .

I tried writing this statement

{ false && <Component2 data={this.state.data} /> }

but this did not work out .

Any suggestions to achieve this type of requirement ?

Answer 1

To hide Component2 (without changing its functionality), add it in a div with style = {{display: 'none'}}

App.js

import React from "react";
import "./style.css";

import Component2 from "./Component2";

export default function App() {
  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <p>Start editing to see some magic happen :)</p>
      <div style={{ display: "none" }}>
        <Component2 myProps="this is a example" />
      </div>
    </div>
  );
}
  

Check demo : https://stackblitz.com/edit/react-bbxgcr?file=src%2FApp.js

PS : Open the console to see the props in correctly passed to Component2

Answer 2

you can do this with only one if. If I understood the problem correctly

const Component2 = (props) => {
 if(props.data === ""){
 return(<div></div>)
}
    return (
        <div className="main-cointainer">
            <h2>Compnent2</h2> 
              
<p>{props.data} </p>
  
        </div>
    )
}
  
export default Component2;

Answer 3

Try using negation to simply convert an empty string into a boolean value.

 { !!this.stat.data && <Component2 data={this.state.data} /> }  

When the this.stat.data is an empty string or falsy value then the Component2 will not render

Or

If you don't want to show display component on the page try this

<Component2 data={this.state.data} hidden={true}/>

Component2

const Component2 =({ data, hidden }) => {
  return (
    <div hidden={hidden}>
      <h1>Component2</h1>
    </div>
  );
}

Adding hidden attribute on the HTML tag will hide the element on the page.