Question 190041 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to stop a component from recursively showing up in react Typescript

I have a parent component Form that has a button where on user click, it will display a child component MyWindow. The MyWindow component also has the Form component so the button will appear in MyWindow as well. How can I stop the Button from displaying in MyWindow when it’s open? I only want the Button to appear in the parent Form.

// parent component --------
interface State {
    showWindow: boolean;
}

export class Form extends React.Component<Props, State> {
    constructor(props: Props) {
        super(props);
        this.state = {
            showWindow: false,
        };
    }

    public render() {
        return (
            <div>
                <Button
                    onClick={() => this.setState({ showWindow: true })}
                >
                    Show Window
                </Button>
                {this.state.showWindow && (
                    <MyWindow/>
                )}
            </div>
        );
    }
}

// child component --------

interface Props {}

export const MyWindow: React.FC<Props> = props => {
    return (
        <Window>
            <Form/>
        </Window>
    );
};
Tags:

2

Answers


  1. 0

    You could add a prop to your child component to know that it is inside form:

    // parent component --------
interface ParentProps {
    isInside?: boolean;
}

interface State {
    showWindow: boolean;
}

export class Form extends React.Component<ParentProps, State> {
    constructor(props: Props) {
        super(props);
        this.state = {
            showWindow: false,
        };
    }

    public render() {
        return (
            <div>
               {!isInside && (
                <Button
                    onClick={() => this.setState({ showWindow: true })}
                >
                    Show Window
                </Button>)}
                {this.state.showWindow && (
                    <MyWindow/>
                )}
            </div>
        );
    }
}

// child component --------

interface Props {}

export const MyWindow: React.FC<Props> = props => {
    return (
        <Window>
            <Form isInside />
        </Window>
    );
};
    Login or Signup to reply.
  2. 0

    You can create a boolean prop in the form component and use it to render the button component.

    // parent component --------
interface State {
    showWindow: boolean;
}

export class Form extends React.Component<Props, State> {
    constructor(props: Props) {
        super(props);
        this.state = {
            showWindow: false,
        };
    }

    public render() {
        return (
            <div>
               {
               !!!this.props.hideButton &&
                <Button
                    onClick={() => this.setState({ showWindow: true })}
                >
                    Show Window
                </Button>
                }
                {this.state.showWindow && (
                    <MyWindow/>
                )}
            </div>
        );
    }
}

// child component --------

interface Props {}

export const MyWindow: React.FC<Props> = props => {
    return (
        <Window>
            <Form hideButton={true}/>
        </Window>
    );
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search