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;
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;
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>}
</>
)
};