React js component state setting to default values

Question

I have a container which embeds the component .IN the component I have state created like this apart from the state sent by container as props.IN the component I have something like this In the container I have something like this

class UserTestContainer extends React.Component {

........
return (
      <Container {...userSettings}>
        <UserTest {...this.props}  />
      </Container>
    )

class UserTest extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      showFlag: false
    }
}

This component will be rendering list of users. IN the same UserTest componentI have modal dialog which will be opened when edit icon is clicked on a particular row .When this edit is clicked I am setting showFlag to true and I am opening a modal based on this showFlag true condition.After clicking on update or close buttons in the modal dialog ,I am routing to same path /users which will again be routed to UserTestContainer which will move to UserTest component .BUt this time modal should be closed .However I see that showFlag is still true which was set during edit click. In this scenario can you please advise on how to make the showFlag state value to default i.e false so that modal dialog can be closed.

Answer 1

2 ways

• In your close modal handler, you can set showflag state to false.

• you can use component unmount callbacks method of ur user profile component to set showflag state to false.

Answer 2

Current I used like below approach.

    import React, { Component } from 'react';

    class Person extends Component {
        state = {
            firstName: null,
            lastName : null,
            age      : null,
            address  : null,
        }

        // Set state to default state
        setDefaultState = () => {
            this.setState({
                firstName: null,
                lastName : null,
                age      : null,
                address  : null,
            });
        }

        render() {
            return(
                <div>
                    Person Component
                </div>
            );
        }
    }

    export default Person;

But I'm not sure is there any other easy way to do this. If there any pre-defined function exists in React JS, I think it better than this approach.