ReactJS conditional component display

Question

I'm trying to get two different cards in one with a switcher button :

As you can see here this is the result I want plus I've already got the console outputting the state of the switcher which is comming from the switcher component.

/* ************************************* */
/* ********       IMPORTS       ******** */
/* ************************************* */
import React, { Component } from 'react';
import { Card, CardBlock, CardTitle, Button, InputGroup, Input } from 'reactstrap';
import ProviderInfos from '../ProviderInfos/ProviderInfos';
import Switcher from '../Switcher/Switcher';
import SearchByType from '../CardCollection/SearchByType';
import SearchExtended from '../CardCollection/SearchExtended';


/* ************************************* */
/* ********      VARIABLES      ******** */
/* ************************************* */

const status = {
    newState: false,
    callBack: () => {},
};

/* ************************************* */
/* ********      COMPONENT      ******** */
/* ************************************* */

class InterfaceCardComponent extends Component {

    // constructor with state and bind of switch state
    constructor(props) {
        super(props);
        //this.handleChange = this.handleChange.bind(this);
        //onChange={newState.handleChange.bind(this)}
        //this.newState = {this.state.bind(this)};


    }
    // switch state
    handleSwitch(newState) {
console.log(newState);
        }

    render() {

        return (
            <Card>
                <div id="cardInterface">
                    <div className="title-switcher-block">
                        <CardTitle>Search by Type</CardTitle>
                        <Switcher callBack={this.handleSwitch} />
                        <CardTitle>Extended search</CardTitle>
                    </div>
                    <div>
                      {/* I cheated here for the picture and put the contents within "SearchByType" */}
                      {this.newState ?
                            <SearchByType />
                            : <SearchExtended />}
                    </div>
                </div>
            </Card>
        );
    }
}

/* ************************************* */
/* ********       EXPORTS       ******** */
/* ************************************* */
export default InterfaceCardComponent;

Hope this makes evident what I'm trying to do. As you can see here :

   <div>
      {this.newState ?
        <SearchByType />
      : <SearchExtended />}
   </div>

this would be my if condition.

this :

handleSwitch(newState) {
    console.log(newState);
}

prints out true or false when I click on the button.

I don't know what should be in the constructor and in the variable section and if to call newState within render with "this.newState" or "newState".

I tried changing my imports to :

import { SearchByType } from '../CardCollection/SearchByType'; 
import { SearchExtended } from '../CardCollection/SearchExtended';

but that did not help and it shouldn't be that anyways since these are export defaut

I'm very lost.

Mayank Shukla · Accepted Answer · 2017-09-05T17:26:24.590

To render the component conditionally (on the basis of toggle value) maintain a bool in state variable and inside render method use that bool for conditional rendering of component.

First define the state inside constructor and newState variable with initial value as false:

constructor(props) {
    super(props);
    this.state = {
        newState: false
    }
    this.handleSwitch = this.handleSwitch.bind(this);
}

Update the state variable inside handleSwitch function:

handleSwitch(newState) {
    this.setState({newState});
}

Use this code to render different component on the basis of switch value:

<div>
    {
        this.state.newState ?
            <SearchByType />
        : 
            <SearchExtended />
    }
</div>

Check these reference for more details:

Why is JavaScript bind() necessary?

Adding Local State to a Class

How to define state

How to update state value

score 0 · Answer 2 · answered Aug 04 '17 at 09:47

You are not using the state mechanism of React at all. Here is how you can fix it

  handleSwitch(newState) {
          this.setState(prevState => ({
            isExtended: !prevState.isExtended
        }));
  }

Your constructor would look like this

 constructor(props) {
        super(props);
        this.state = {};
        this.handleSwitch = this.handleSwitch.bind(this);
    }

And you would check it with

{
    this.state.isExtended ?
        <SearchExtended/> : <SearchByType/>
}

And lastly read more about states and lifecycle here https://facebook.github.io/react/docs/state-and-lifecycle.html

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `InterfaceCardComponent`. — tatsu, Aug 04 '17 at 11:00

ReactJS conditional component display

2 Answers2

Linked