Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // Parent Component
- class Root extends React.Component {
- constructor(props) {
- super(props);
- this.state = { refresh: true };
- // Parents non-state variable.
- this.submitBtnVisibility = { visibility1: 1, visibility2: 2 };
- }
- componentDidMount() {
- console.log("Root componentDidMount ");
- }
- componentDidUpdate(prevProps, prevState) {
- console.log("Root componentDidUpdate ", prevProps, prevState);
- }
- handleonclick = () => {
- console.log(" Root Btn Clicked");
- //this.setState({ var1: 5 }); -> If I enable this line , child is getting rendered
- this.submitBtnVisibility.visibility1 = 5;
- };
- render() {
- console.log(" Root Render ");
- return (
- <div className={classes.uploadContainerArea}>
- <Btncomponent visibility={this.submitBtnVisibility} />
- <button className={classes.btnroot} onClick={this.handleonclick}>
- {" "}
- Root Btn{" "}
- </button>
- </div>
- );
- }
- }
- // Child Component
- class Btncomponent extends React.Component {
- constructor(props) {
- super(props);
- this.state = { Btnprops: this.props.visibility };
- }
- componentDidMount() {
- console.log("Btncomponent componentDidMount ");
- }
- componentDidUpdate(prevProps, prevState) {
- console.log("Btncomponent componentDidUpdate ", prevProps, prevState);
- }
- static getDerivedStateFromProps(props, state) {
- console.log(" getDerivedStateFromProps ");
- return null;
- }
- shouldComponentUpdate(nextProps, nextState) {
- console.log(" shouldComponentUpdate ");
- return true;
- }
- getSnapshotBeforeUpdate(prevProps, prevState) {
- console.log(" getSnapshotBeforeUpdate ");
- return null;
- }
- render() {
- console.log(" Btncomponent Render ", this.props);
- return <button type="button"> {this.props.visibility.visibility1} </button>;
- }
- }
Add Comment
Please, Sign In to add comment