Show React component based on click event-CodePudding

I am trying to render two different components based on the click event that gets passed the text of the button in React. I know how to do it in the function, but how do I render the DOM element based on the click event? so far I have:

const Popup: React.FunctionComponent = () => {

    const [visible, setVisible] = React.useState<boolean>(false);

    const toggleDialog = (e: React.MouseEvent<HTMLButtonElement>) => {
        if (e.currentTarget.textContent === 'Primary') {
            setVisible(!visible);
            console.log(e.currentTarget.textContent);
            return (
               <div>
               <p>{e.currentTarget.textContent}</p>
               </div>
            )
        } else {
            console.log(e.currentTarget.textContent);
            setVisible(!visible);
            return (
                <div>
                <p>{e.currentTarget.textContent}</p>
                </div>
            )
        }
    };

    const closeDialog = () => {
        setVisible(false);
    };

    return (
        <>
            <Button variant="primary" onClick={toggleDialog}>Primary</Button>
            <Button variant="secondary" onClick={toggleDialog}>secondary</Button>
            {visible && <Dialog title={"Please confirm"} onClose={closeDialog}>
                {toggleDialog}
                <DialogActionsBar>
                    <button className="button" onClick={toggleDialog}>No</button>
                    <button className="button" onClick={toggleDialog}>Yes</button>
                </DialogActionsBar>
            </Dialog>}
        </>
    )
}

export default Popup;

CodePudding user response：

You seem to be trying to use toggleDialog for two different things: handling the button-click and rendering the components. Every function should do exactly one thing:

const Popup: React.FunctionComponent = () => {

    const [visible, setVisible] = React.useState(false);
    const [content, setContent] = React.useState('');

    const toggleDialog = (e: React.MouseEvent<HTMLButtonElement>) => {
        setVisible(!visible);
        setContent(e.currentTarget.textContent);
    };

    const closeDialog = () => {
        setVisible(false);
    };

    return (
        <>
            <Button variant="primary" onClick={toggleDialog}>Primary</Button>
            <Button variant="secondary" onClick={toggleDialog}>secondary</Button>
            {visible && <Dialog title={"Please confirm"} onClose={closeDialog}>
                {content}
                <DialogActionsBar>
                    <button className="button" onClick={toggleDialog}>No</button>
                    <button className="button" onClick={toggleDialog}>Yes</button>
                </DialogActionsBar>
            </Dialog>}
        </>
    )
}

export default Popup;

CodePudding user response：

I did it like this in the end:

 const [visible, setVisible] = React.useState<boolean>(false);
    const [content, setContent] = React.useState<string>('Primary');

    const toggleDialog = (e: React.MouseEvent<HTMLButtonElement>) => {
        setVisible(!visible);
        if (e.currentTarget.textContent === 'Primary') {
            setContent('Primary');
        } else {
            setContent('Secondary');
        }
    };

    const closeDialog = () => {
        setVisible(false);
    };

    return (
        <>
            <Button variant="primary" onClick={toggleDialog}>Primary</Button>
            <Button variant="secondary" onClick={toggleDialog}>Secondary</Button>
            {visible && <Dialog title={"Please confirm"} onClose={closeDialog}>
                {content === 'Primary' && (
                    <p>This is the first component</p>
                )}
                {content === 'Secondary' && (
                    <p>This is the second component</p>
                )}

                <DialogActionsBar>
                    <p>Content action bar</p>
                </DialogActionsBar>
            </Dialog>}
        </>
    )
};