Not sure how to implement conditional rendering here(react-native)

Question

I have this Barchart rendering component here

    const BarCharts = () => {
    const fill = 'rgb(134, 65, 244)'
    const data = [50, 10, 40, 95, -4, -24, null, 85, undefined, 0, 35, 53, -53, 24, 50, -20, -80]
    return (
      <View style={styles.sectionContainer}>
        <BarChart style={{ height: 200 }} data={data} svg={{ fill }} contentInset={{ top: 30, bottom: 30 }}>
          <Grid />
        </BarChart>
      </View>
    );
  };

I have to use this component to draw up the barchart inside another component. I want to use the Barcharts component inside the if in the below component:

            <SearchableDropdown
            onItemSelect={(item) => {
              if (item.type =='1') {
                //alert(item.type);
                return <BarCharts />
              }
              if (item.type =='2') {
                alert(item.type);
              }
            }}

Currently the 'return' inside the conditional if is not returning anything. Upon clicking item1, BarCharts is to be returned

Does this answer your question? [if-else statement inside jsx: ReactJS](https://stackoverflow.com/questions/44046037/if-else-statement-inside-jsx-reactjs) — Yehor Androsov, Nov 12 '20 at 07:23

score 0 · Accepted Answer · answered Nov 06 '20 at 13:04

You can try something like

function Example() {

  const [showChart, setShowChart] = useState(false); // Default bar chart won't be display

  return (
    <View>
      <SearchableDropdown
            onItemSelect={(item) => {
              if (item.type =='1') {
                 setShowChart(true); // Chart will be display here when state changes
              }
              if (item.type =='2') {
                alert(item.type);
              }
            }}
    />
    {showChart && <BarCharts /> }
    </View>
  );
}

score 0 · Answer 2 · answered Nov 06 '20 at 13:05

According to the react-native-searchable-dropdown docs, onItemSelect prop is used to catch the selected input. So where are you returning this component to? If you want to render this when user selects a specific item, create a state and change it when item is selected using onItemSelect prop like:

onItemSelect={(item) => {
this.setState({selectedItemType: item.type});
}}

Then in your component check if selected item is what you want to render like:

<View>
{this.state.selectedItemType === 1 && <BarCharts />}
</View>

Few points:

Verify if item.type contains the right value
Use '===' instead of '=='

score 0 · Answer 3 · answered Nov 06 '20 at 13:07

Here is your answer

constructor(props)
{
super(props);
this.state = { showBarChart: false };
}
.
.
.
//your code

render()
{

return (

{/* Your code */}

        <SearchableDropdown
            onItemSelect={(item) => {
              if (item.type =='1') {
                this.setState({ showBarChart: true });
              }
              if (item.type =='2') {
                alert(item.type);
              }
            }} />
    
           {showBarChart ? <Barchart /> : null }

 
);

}

Not sure how to implement conditional rendering here(react-native)

3 Answers3