JSX中的条件渲染不会隐藏元素

Question

So i have this react component which contains a conditional rendering in some part. so far so good and this practice has been acting as expected all throughout my app.
but surprisingly the element we're talking is not getting hidden as a result of change in condition.

let me provide you with a minimal representation of relevant code because the original component is too lengthy and cumbersome.

import React from 'react';
import AnotherComponent from '../components/AnotherComponent';

export class TheComponent extends Component {
  /* 
    1. props.data is coming from mapping component state to redux connect
    2. connect file and selectors are alright, because other parts of this component
       work as expected, and even same props.data is used elsewhere in the component
    3. a method wihtout input as in showAnotherComponent = () => false; will hide the 
       AnotherComponent element successfully. but even sth like 
       showAnotherComponent = (data) => false; will not work!!!
    4. props.data is properly injected to the render method, console.log(props.data)  in reder 
       method will display updated value.
    5. props.data is never null or undefined and so on ..
  */
  showAnotherComponent = data => data.flag === 'AAA';

  render() {
    console.log(this.props.data); // will show the updated props.data

    return (
      <div className="row">
        <div className="col-md-10">
          <h1>Some heading</h1>
        </div>
        <div className="col-md-2">
          {/* the element in next line will always show up invariably, whatever the
          content of props.data. tried ternary, same result. */}
          {this.showAnotherComponent(this.props.data) && <AnotherComponent />}
        </div>
      </div>
    );
  }
}

export default TheComponent;

Unfortunately creating a fully working sample is a bit hard, considering all the third party dependencies and the redux wiring.

Nevertheless, if you have ever run into similar situation and got to the bottom of it, please share your experience with me.

note: Updated props.data is passed to the component normally. in the react dev tools it shows up and in redux dev tools history of state is quite healthy. the only problem here is that the conditional won't hide the element in a falsy state.

UPDATE. the reason for this weird rendering was a dynamic loop in the same component rendering this AnotherComponent regardless of the flag value. what made it hard to pin down was that it was rendering it in map and passing index of dynamic string content. anyhow, thank you all and sorry for the possible misleading question.

Answer 1

It is working fine here.

You should check the data in your props if there is any flag key or not and if there is a flag key check that if it is AAA or not.

 class App extends React.Component { constructor() { super(); this.state = { data: "aa" }; } /* 1. props.data is coming from mapping component state to redux connect 2. connect file and selectors are alright, because other parts of this component work as expected, and even same props.data is used elsewhere in the component 3. a method wihtout input as in showAnotherComponent = () => false; will hide the AnotherComponent element successfully. but even sth like showAnotherComponent = (data) => false; will not work!!! 4. props.data is properly injected to the render method, console.log(props.data) in reder method will display updated value. 5. props.data is never null or undefined and so on .. */ showAnotherComponent = data => data.flag === "AAA"; render() { console.log(this.props.data); // will show the updated props.data return ( <div className="row"> <div className="col-md-10"> <h1>Some heading</h1> </div> <div className="col-md-2"> {/* the element in next line will always show up invariably, whatever the content of props.data. tried ternary, same result. */} {this.showAnotherComponent({ flag: this.state.data }) && ( <div>asdsdasd</div> )} </div> <button onClick={() => this.setState({ data: "AAA" })}>Toggle</button> </div> ); } } ReactDOM.render(<App />, document.body); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> 

Click on Toggle and the Data will be displayed.