[React] Make Controlled React Components with Control Props

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;