How to create React tags


I will make this memorandum to review the previous code and I wondered if I could create a Layout tag.

It is described to keep things simple and organized.

Please let me know if there is a better way. Sorry for any typos.


Layout.jsx and UseLayout.jsx are at the same level. In fact, it's better to split them out

If you want to make Typescript, Children can go and feel good if you import and assign ReactElement from react. children: ReactElement <any> Like this.


import React, { Fragment, cloneElement } from "react";

const Layout = props => {
  const { title, children } = props;
  return (

export default Layout;


import React from "react";
import Layout from "./Layout";

const UseLayout = () => (
  <Layout title="This is Layout">
      Put component here
      <button>This is button</button>

In case creating a dialog or change the event dynamically

When you want to apply a dialog similar to material-ui of multiple pages

However, in case you want to change the event

I am writing in TypeScript, but if you want to use JavaScript, delete the props:

change = ({children, title, ...}) => to = props =>


import React, { cloneElement, ReactElement } from "react";
import Dialog from "@material-ui/core/Dialog";
import Button from "@material-ui/core/Button";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";

type Props = {
  children: ReactElement<any>,
  title: string,
  description: string,
  disagree: string,
  agree: string,
  action?: Function | null,

const Dialog: React.FC<Props> = ({
  action = null,
}) => {
  const [open, setOpen] = React.useState(false);
  return (
      {cloneElement(children, {onClick: () => setOpen(true)})}
        onClose={() => setOpen(false)}
          <Button onClick={() => setOpen(false)}>
          <Button onClick={() => {
            action !== null & action()


Children received from the top can be received as Dialog.tsx as components,


The title, OK button, NG button and description are mandatory arguments this time.

  description="OK or NG?"
  disagree="button NG"
  agree="button OK"
  action={() => concole.log("OK or NG is clicked")}

And I will set the action for each component

You can execute the function by passing the function you want to execute to action.

When using react-redux, you can also apply dispatch to action.

All rights reserved

Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí