If statement not working when passing props to functional component using Reactjs?

Question

I have just started to learn React and the if statement I have inside my functional component (in ChooseInputType.js shown below) is returning 'false' even though I would expect it to return 'true'. My simplified code is below - can anyone spot the problem? I would like to use Hooks rather than Classes if that's relevant!

Form.js

import React from 'react';
import ChooseInputType from './ChooseInputType';

function App(){
    return(
        <ChooseInputType 
            type="select"
        ></ChooseInputType >
);
}

ChooseInputType.js

function ChooseInputType({type}){
    if({type} ==='select'){
        return (<div>True: Type is {type} </div>);
    else{
        return (<div>False: Type is {type} </div>);
    }
}
export default ChooseInputType;

As you can see from Form.js above, the type property being passed into the ChooseInputType component is equal to "select" and yet the result returned is incorrectly displaying the following:

Result

False: Type is select

This does not happen if I create a variable within ChooseInputType.js (as below), so it must be something about the way I'm passing the type property to the ChooseInputType component?

    function ChooseInputType({type}){
    //I have removed the props part by creating a type variable here
        const type="select";
        if(type ==='select'){
            return (<div>True</div>);
        else{
            return (<div>False</div>);
        }
    }
    export default ChooseInputType;

I'd be grateful for any pointers!

Many thanks,

Katie

remove the {} from if({type} ==='select'){ to become if(type ==='select'){ — Taki
– Taki, Commented Mar 11, 2020 at 15:02
Remember: in JSX {} is used to denote a javascript variable or expression, but outside of JSX it is object syntax. — Brian Thompson
– Brian Thompson, Commented Mar 11, 2020 at 15:06

Sumedh Chakravorty · Accepted Answer · 2020-03-11 15:03:33Z

2

The problem is with the line below where you are using {type} to compare to 'select'

if({type} ==='select')

it should simply be

if(type ==='select')

answered Mar 11, 2020 at 15:03

Sumedh Chakravorty

3951 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shawn Yap · Accepted Answer · 2020-03-11 15:06:19Z

1

function ChooseInputType({type}){
    if({type} ==='select'){ // change {type} to type
        return (<div>True: Type is {type} </div>);
    else{
        return (<div>False: Type is {type} </div>);
    }
}
export default ChooseInputType;

This does not work because you've already extracted type from props at argument and it's no longer an object.

Here's a good medium post to read about destructing objects: https://medium.com/@pyrolistical/destructuring-nested-objects-9dabdd01a3b8

answered Mar 11, 2020 at 15:06

Shawn Yap

9697 silver badges12 bronze badges

Comments

Joe Lloyd · Accepted Answer · 2020-03-11 15:11:02Z

1

Don't wrap it in brackets after its been deconstructed

This alone should work. The curly brackets mean you are getting the value of the key type from your object. you should not use brackets around it when you use it after because thats like putting it back inside an object and {type: 'select'} !== 'select' but deconstructed type is equal to 'select'

    function ChooseInputType({type}){
        if(type ==='select'){
            return (<div>True</div>);
        else{
            return (<div>False</div>);
        }
    }
    export default ChooseInputType;

edited Mar 11, 2020 at 15:11

answered Mar 11, 2020 at 15:03

Joe Lloyd

22.8k7 gold badges59 silver badges86 bronze badges

Collectives™ on Stack Overflow

If statement not working when passing props to functional component using Reactjs?

3 Answers 3

Comments

Comments

Don't wrap it in brackets after its been deconstructed

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Don't wrap it in brackets after its been deconstructed

Comments

Your Answer

Sign up or log in

Post as a guest

Related