Sometimes users of your component want to have more control over what the internal state is. In this lesson we'll learn how to allow users to control some of our component’s state just like the <input />'s value prop.

 

Controlled props is the prop that component let user fully control.

import React from 'react';class Toggle extends React.Component {    // An empty function    static defaultProps = {        defaultOn: false,        onToggle: () => {        }    };    // default state value    initialState = {on: this.props.defaultOn};    state = this.initialState;    isControlled() {        return this.props.on !== undefined;    }    // toggle method    toggle = () =>{      if (this.isControlled()) {        this.props.onToggle(!this.props.on)      } else {          this.setState(              ({on}) => ({on: !on}),              () => {                  this.props.onToggle(this.state.on)              }          );      }    };    reset = () => this.setState(        this.initialState    );    render() {        return this.props.render({            on: this.isControlled() ?                    this.props.on :                    this.state.on,            toggle: this.toggle,            reset: this.reset,            getProps: (props) => {                return {                    'aria-expanded': this.state.on,                    role: 'button',                    ...props                };            }        });    }}export default Toggle;