React component didn't toggle property

Hello,
I’m trying simple React example but something is going wrong
here is my code
In Textarea component I’m just toggle property between two state
But it’s running as well, and I can catch why
the same thing in Button Component working perfectly

import React, { Component } from "react";

const Textarea = props => {
  console.log(props.toggle);

  return <div>{props.toggle ? "Hello" : "By"}</div>
};

class Button extends Component {
  constructor(props) {
    super(props);
    this.state = {
      toggle: true
    };
  }

  handleClick = () => {
    this.setState({
      toggle: !this.state.toggle
    });
  };

  render() {
    const toggle = this.state.toggle ? "On" : "Off";

    return (
      <div>
        <button onClick={this.handleClick}>{toggle}</button>
        <Textarea toggle={toggle} />
      </div>
    );
  }
}

export default Button;

const toggle = this.state.toggle ? "On" : "Off";

toggle will be a string, either “On” or “Off”

And because of that, here:

return <div>{props.toggle ? "Hello" : "By"}</div>

the result will always be “Hello”, because props.toggle is a non-empty string.

1 Like