React ternary operator in HTML not rendering proper HTML

Question

I'm very new to React and having some trouble with what I thought would be a simple ternary operator. I'm just trying to display a minus sign by default, and a plus sign when it's clicked. I wrote a ternary operator in my JSX and set the initial state of the component to a false, boolean, and switch it when clicked. Seems pretty simple.

The page displays a plus sign by default, though, and I'm not sure why. When I click on it, it doesn't change and the console.log I have in the code displays the boolean. Anyone have any idea what's up? Thanks in advance. Here's the code for my component:

import React, { Component } from 'react';

class Header extends Component {
    constructor(props) {
        super(props);

        this.state = {
            showMinus: false,
        };


        this.changeSign = () => {
            this.state.showMinus = !this.state.showMinus;
            console.log('CLICKED ', this.state.showMinus);
        }
    };

    render() {
        return (
            <div className="header">
                <div>State: {this.state.showMinus}</div>
                <div>30%</div>
                <div>$200000</div>
                <div>85%</div>
                <div>
                    {this.state.showMinus ? <span className="plusOrMinus" onClick={this.changeSign}> - </span>
                        :
                    <span className="plusOrMinus" onClick={this.changeSign}> + </span>}
                </div>
            </div>
        );
    }
}

export default Header;

You have few problems in your code. To update the state always use this.setState. — MontyGoldy
– MontyGoldy, Commented May 6, 2018 at 23:04
The default makes sense. showMinus is false so second span gets rendered with + as text. Your ternary is backwards if you want different default based on false — charlietfl
– charlietfl, Commented May 6, 2018 at 23:05

MEnf · Accepted Answer · 2018-05-07 01:38:58Z

2

Reactjs is a style of functional programming, the idea is to keep your code immutable. React has a method of setting state using the setState function. What you are doing in this line this.state.showMinus = !this.state.showMinus; is mutating your state, which won't trigger a rerender in react.

Change that line of code to: this.setState({ showMinus: !this.state.showMinus }) and it should work.

edited May 7, 2018 at 1:38

answered May 6, 2018 at 23:04

MEnf

1,5321 gold badge12 silver badges20 bronze badges

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

Comments

MontyGoldy · Accepted Answer · 2018-05-06 23:12:17Z

You have few problems in your code. To update the state always use this.setState

import React, { Component } from 'react';

    class Header extends Component {
        constructor(props) {
            super(props);

            this.state = {
                showMinus: false,
            };


            changeSign = () => {
                this.setState({ showMinus = !this.state.showMinus })
                console.log('CLICKED ', this.state.showMinus);
            }
        };

        render() {
            return (
                <div className="header">
                    <div>State: {this.state.showMinus}</div>
                    <div>30%</div>
                    <div>$200000</div>
                    <div>85%</div>
                    <div>
                        {this.state.showMinus ?  <span className="plusOrMinus" onClick={this.changeSign}> + </span>
                            : <span className="plusOrMinus" onClick={this.changeSign}> - </span>
                       }
                    </div>
                </div>
            );
        }
    }

    export default Header;

Collectives™ on Stack Overflow

React ternary operator in HTML not rendering proper HTML

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related