Stateless component to toggle boolean

Question

What is the proper way of converting the following codes to stateless component?

export default class About extends Component {

  state = {
    showKitten: false
  }

  handleToggleKitten = () => this.setState({ showKitten: !this.state.showKitten });

  render() {
    const { showKitten } = this.state;
    const kitten = require('./kitten.jpg');
    return (
      <div className="container">
        {showKitten && <div><img src={kitten} alt="kitchen" /></div>}
      </div>
    );
  }
}

Managed to define the props, etc. The following code works on logging a message. But what would be the best way to toggle boolean?

const handleToggleKitten = () => {
  console.log('Hello from here');
  **// How to toggle the value of boolean here?**
};

const About = (props) => {
  const { showKitten } = props;
  const kitten = require('./kitten.jpg');
  return (
    <div className="container">
      {showKitten && <div><img src={kitten} alt="kitchen" /></div>}
    </div>
  );
};

About.defaultProps = {
  showKitten: false
};

About.propTypes = {
  showKitten: PropTypes.bool.isRequired
};

How is `handleToggleKitten` invoked? I don't see any need for that method. Also remove `defaultProps` which have no sense for a required property. — Sulthan, May 09 '17 at 12:51
missed out that part, through button onClick like the code below. — Yen Sheng, May 09 '17 at 13:47

Shubham Khatri · Accepted Answer · 2017-05-09T13:00:27.147

You should be having a stateful component that renders the stateless component and passes and updates props to it

class App extends React.Component {
     
     state= {showKitten: false}
     handleToggleKitten = () => {
        this.setState((prevState, props) => ({
            showKitten: !prevState.showKitten
        }))
      };

     render()  {
         return (
              <About showKitten={this.state.showKitten} handleToggleKitten={this.handleToggleKitten}/>
         ) 

     }
}
const About = (props) => {
  const { showKitten } = props;
 
  return (
    <div className="container">
      {showKitten && <div><img src={"http://addolo.com/wp-content/uploads/2016/12/kitten-pics-uncategorized-84-astonishing-photo-ideas-kittens-cattime-black-and-white-pictures-funny-with-captionskitten-cutekitten.jpg"} alt="kitchen" /></div>}
      <button onClick={props.handleToggleKitten}>Toggle</button>
    </div>
  );
};


About.propTypes = {
  showKitten: React.PropTypes.bool.isRequired
};

ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

thanks, it works great! however i'm getting `error 'handleToggleKitten' is missing in props validation react/prop-types` unless I declare it within propTypes. — Yen Sheng, May 09 '17 at 13:45

score 0 · Answer 2 · answered Jan 12 '18 at 11:29

0

Hey Yen Sheng a bit late but try this.

let showKitten = false;


const handleToggleKitten = () => {
    console.log('Hello from here');
    **// How to toggle the value of boolean here?**
    showKitten = !showKitten;
};

answered Jan 12 '18 at 11:29

Julius Ting

83
1
5

Stateless component to toggle boolean

2 Answers2