Rendering ReactJS Conditional Components
I'm trying to get two different maps in one with a radio button:
As you can see here, this is the output I want, plus I already got a console outputting the state of the switch that comes from the switch 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 it obvious what I am trying to do. As you can see here:
<div>
{this.newState ?
<SearchByType />
: <SearchExtended />}
</div>
this will be my if condition.
this is:
handleSwitch(newState) {
console.log(newState);
}
outputs true or false when I click the button.
I don't know what should be in the constructor and in the variables section, and if you call newState in the render using this.newState or newState.
I tried to change my import to:
import { SearchByType } from '../CardCollection/SearchByType';
import { SearchExtended } from '../CardCollection/SearchExtended';
but it didn't help and it shouldn't be that way since this export defaut
I am very lost.
source to share
To render the component conditionally (based on the toggle value), maintain a bool state variable and inside the render method use that bool to conditionally render the component.
First, define the state inside the constructor and newState with an initial value of false:
constructor(props) {
super(props);
this.state = {
newState: false
}
this.handleSwitch = this.handleSwitch.bind(this);
}
Update the state variable inside the handleSwitch function:
handleSwitch(newState) {
this.setState({newState});
}
Use this code to render another component based on the radio button value:
<div>
{
this.state.newState ?
<SearchByType />
:
<SearchExtended />
}
</div>
Check this link for more details:
Why is JavaScript () binding required?
source to share
You are not using the state
React engine at all . Here's how you can fix it.
handleSwitch(newState) {
this.setState(prevState => ({
isExtended: !prevState.isExtended
}));
}
Your constructor will look like this:
constructor(props) {
super(props);
this.state = {};
this.handleSwitch = this.handleSwitch.bind(this);
}
And you check it with
{
this.state.isExtended ?
<SearchExtended/> : <SearchByType/>
}
And finally, more details about states and lifecycle here https://facebook.github.io/react/docs/state-and-lifecycle.html
source to share