-
- }
- componentDidMount() {
- document.addEventListener('modal', this.modalHandler);
- }
- componentWillUnmount() {
- document.removeEventListener('modal', this.modalHandler);
- }
- close() {
- this.setState({
- visible: false,
- data: {
- title: '',
- closeOnClick: false,
- content: ''
- }
- });
- }
- static show(data) {
- document.dispatchEvent(new CustomEvent('modal', {
- detail: {
- data
- }
- }));
- }
- modalClick() {
- if (this.state.data.closeOnClick) this.close();
- }
-}
-```
-#### Notes
-
-This component includes a lot of CSS, which might conflict with other CSS in your project. It is recomended for the modal to be a direct child of the body tag.,A more up-to-date method with lower compatibility is to use [Portals](https://reactjs.org/docs/portals.html) in React 16+.,,
-
-
-
- { this.state.data.title }+
-
- {
- this.state.data.content
- }
-
-
-
-});
-```
-
-
-Examples
- -```jsx -// add to render function -
-});
-```
-[⬆ Back to top](#table-of-contents) - ### StarRating Renders a star rating component. -Use and IIFE to define a functional component, called `Star` that will render each individual star with the appropriate appearance, based on the parent component's `state` and return the class component `StarRating`. -Use the value of the `rating` prop to determine if a valid rating is supplied and store it in `state.rating` (or `0` if invalid or not supplied). -Initialize `state.selection` to `0`. -Create two methods, `hoverOver` and `setRating`, that take an event as argument and update `state.selected` and `state.rating` according to it, bind them both to the component's context. -In the `render()` method, create a `
` to wrap the `` components, which are created using `Array.prototype.map` on an array of 5 elements, created using `Array.from`, and handle the `onMouseLeave` event to set `state.selection` to `0`, the `onClick` event to set
-the `state.rating` and the `onMouseOver` event to set `state.selection` to the `star-id` attribute of the `event.target` respectively.
+Define a component, called `Star` that will render each individual star with the appropriate appearance, based on the parent component's state.
+In the `StarRating` component, use the `React.setState()` hook to define the `rating` and `selection` state variables with the initial values of `props.rating` (or `0` if invalid or not supplied) and `0`.
+Create a method, `hoverOver`, that updates `selected` and `rating` according to the provided `event`.
+Create a `
` to wrap the `` components, which are created using `Array.prototype.map` on an array of 5 elements, created using `Array.from`, and handle the `onMouseLeave` event to set `selection` to `0`, the `onClick` event to set the `rating` and the `onMouseOver` event to set `selection` to the `star-id` attribute of the `event.target` respectively.
Finally, pass the appropriate values to each `` component (`starId` and `marked`).
```jsx
-const StarRating = (function() {
- function Star({ marked, starId }) {
- return (
-
- {marked ? '\u2605' : '\u2606'}
-
- );
- }
+function Star({ marked, starId }) {
+ return (
+
+ {marked ? "\u2605" : "\u2606"}
+
+ );
+}
- return class StarRating extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- rating: typeof props.rating == 'number' ? props.rating : 0,
- selection: 0
- };
- this.hoverOver = this.hoverOver.bind(this);
- this.hoverOut = this.hoverOver.bind(this, null);
- this.handleClick = this.handleClick.bind(this);
- }
- hoverOver(event) {
- let val = 0;
- if (event && event.target && event.target.getAttribute('star-id'))
- val = event.target.getAttribute('star-id');
- this.setState(state => ({ selection: val }));
- }
- handleClick(event) {
- const val = event.target.getAttribute('star-id') || this.state.rating;
- this.setState(state => ({ rating: val }));
- }
- render() {
- return (
-
- {Array.from({ length: 5 }, (v, i) => (
- = i+1
- : this.state.rating >= i+1
- }
- />
- ))}
-
- );
- }
+function StarRating(props) {
+ const [rating, setRating] = React.useState(
+ typeof props.rating == "number" ? props.rating : 0
+ );
+ const [selection, setSelection] = React.useState(0);
+ const hoverOver = event => {
+ let val = 0;
+ if (event && event.target && event.target.getAttribute("star-id"))
+ val = event.target.getAttribute("star-id");
+ setSelection(val);
};
-})();
+ return (
+ hoverOver(null)}
+ onClick={() =>
+ setRating(event.target.getAttribute("star-id") || this.state.rating)
+ }
+ onMouseOver={hoverOver}
+ >
+ {Array.from({ length: 5 }, (v, i) => (
+ = i + 1 : rating >= i + 1}
+ />
+ ))}
+
+ );
+}
```
diff --git a/data/snippet_data.json b/data/snippet_data.json
index fdc493f20..6c8de8b51 100644
--- a/data/snippet_data.json
+++ b/data/snippet_data.json
@@ -163,30 +163,6 @@
""
]
},
- {
- "name": "ModalDialog.md",
- "title": "ModalDialog",
- "text": "Renders a dialog component in a modal, controllable through events. \nTo use the component, import `ModalDialog` only once and then display it using `ModalDialog.show()`, passing the JSX templates and data as parameters.\n\nDefine `modalHandler`, a method that will handle showing the modal dialog, set `state` to the default values initially and bind the `close` and `modalClick` methods to the component's context.\nDefine `close` and `modalClick` to toggle the visibility of the modal dialog, based on `state.closeOnClick`.\nUse the CustomEvent API to listen for `modal` events, that can be dispatched from the `static` `show()` method, handle listeners appropriately from `componentDidMount` and `componentWillUnmount`.\n\nThe `show()` method accepts an argument, that should contain three parameters:\n* `title`, a string for the dialog's title\n* `closeOnClick`, `true` if the modal should close on click or `false` if it should only close when clicking the *X* button\n* `content`, which is the JSX content to be rendered inside the dialog\n\nFinally, in the `render()` method, use a `
` to wrap everything and render the modal dialog with the content passed to `show()`.\n\n",
- "codeBlocks": [
- "```css\n .modal {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.6);\n z-index: 9998;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n .dialog {\n background-color: white;\n border-radius: 5px;\n overflow: hidden;\n }\n .dialog-title {\n box-sizing: border-box;\n width: 100%;\n height: 48px;\n padding: 0 16px;\n border-bottom: 0.5px solid #c3c3c3;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n .dialog-close {\n font-size: 32px;\n color: #c3c3c3;\n cursor: pointer;\n transform: rotate(45deg);\n user-select: none;\n }\n .dialog-close:hover {\n color: red;\n }\n .dialog-content {\n min-width: 300px;\n }\n```",
- "```jsx\nclass ModalDialog extends React.Component {\n constructor() {\n super();\n this.modalHandler = (e) => {\n this.setState({\n data: e.detail.data,\n visible: true\n });\n };\n this.state = {\n data: {\n title: '',\n closeOnClick: false,\n content: ''\n },\n visible: false\n };\n this.close = this.close.bind(this);\n this.modalClick = this.modalClick.bind(this);\n }\n render() {\n return !this.state.visible ? null : ![](\"https://github.com/30-seconds/30-seconds-of-react/blob/master/logo.png\"/)
\n}); \n```"
- ],
- "expertise": 1,
- "tags": [
- "visual",
- "static",
- "children",
- "state",
- "class"
- ],
- "notes": [
- "This component includes a lot of CSS, which might conflict with other CSS in your project. It is recomended for the modal to be a direct child of the body tag.",
- "A more up-to-date method with lower compatibility is to use [Portals](https://reactjs.org/docs/portals.html) in React 16+.",
- "",
- ""
- ]
- },
{
"name": "PasswordRevealer.md",
"title": "PasswordRevealer",
@@ -221,9 +197,9 @@
{
"name": "StarRating.md",
"title": "StarRating",
- "text": "Renders a star rating component.\n\nUse and IIFE to define a functional component, called `Star` that will render each individual star with the appropriate appearance, based on the parent component's `state` and return the class component `StarRating`.\nUse the value of the `rating` prop to determine if a valid rating is supplied and store it in `state.rating` (or `0` if invalid or not supplied).\nInitialize `state.selection` to `0`.\nCreate two methods, `hoverOver` and `setRating`, that take an event as argument and update `state.selected` and `state.rating` according to it, bind them both to the component's context.\nIn the `render()` method, create a `
\n
\n }\n componentDidMount() {\n document.addEventListener('modal', this.modalHandler);\n }\n componentWillUnmount() {\n document.removeEventListener('modal', this.modalHandler);\n }\n close() {\n this.setState({\n visible: false,\n data: {\n title: '',\n closeOnClick: false,\n content: ''\n }\n });\n }\n static show(data) {\n document.dispatchEvent(new CustomEvent('modal', {\n detail: {\n data\n }\n }));\n }\n modalClick() {\n if (this.state.data.closeOnClick) this.close();\n }\n}\n```",
- "```jsx\n// add to render function\n\n
\n { this.state.data.title }+
\n \n {\n this.state.data.content\n }\n
\n \n}); \n```"
- ],
- "expertise": 1,
- "tags": [
- "visual",
- "static",
- "children",
- "state",
- "class"
- ],
- "notes": [
- "This component includes a lot of CSS, which might conflict with other CSS in your project. It is recomended for the modal to be a direct child of the body tag.",
- "A more up-to-date method with lower compatibility is to use [Portals](https://reactjs.org/docs/portals.html) in React 16+.",
- "",
- ""
- ]
- },
{
"name": "PasswordRevealer.md",
"title": "PasswordRevealer",
@@ -221,9 +197,9 @@
{
"name": "StarRating.md",
"title": "StarRating",
- "text": "Renders a star rating component.\n\nUse and IIFE to define a functional component, called `Star` that will render each individual star with the appropriate appearance, based on the parent component's `state` and return the class component `StarRating`.\nUse the value of the `rating` prop to determine if a valid rating is supplied and store it in `state.rating` (or `0` if invalid or not supplied).\nInitialize `state.selection` to `0`.\nCreate two methods, `hoverOver` and `setRating`, that take an event as argument and update `state.selected` and `state.rating` according to it, bind them both to the component's context.\nIn the `render()` method, create a `` to wrap the `` components, which are created using `Array.prototype.map` on an array of 5 elements, created using `Array.from`, and handle the `onMouseLeave` event to set `state.selection` to `0`, the `onClick` event to set\nthe `state.rating` and the `onMouseOver` event to set `state.selection` to the `star-id` attribute of the `event.target` respectively. \nFinally, pass the appropriate values to each `` component (`starId` and `marked`).\n\n",
+ "text": "Renders a star rating component.\n\nDefine a component, called `Star` that will render each individual star with the appropriate appearance, based on the parent component's state.\nIn the `StarRating` component, use the `React.setState()` hook to define the `rating` and `selection` state variables with the initial values of `props.rating` (or `0` if invalid or not supplied) and `0`.\nCreate a method, `hoverOver`, that updates `selected` and `rating` according to the provided `event`.\nCreate a ` hoverOver(null)}\n onClick={() =>\n setRating(event.target.getAttribute(\"star-id\") || this.state.rating)\n }\n onMouseOver={hoverOver}\n >\n {Array.from({ length: 5 }, (v, i) => (\n = i + 1 : rating >= i + 1}\n />\n ))}\n
\n );\n}\n```",
"```jsx\nReactDOM.render(` to wrap the `` components, which are created using `Array.prototype.map` on an array of 5 elements, created using `Array.from`, and handle the `onMouseLeave` event to set `selection` to `0`, the `onClick` event to set the `rating` and the `onMouseOver` event to set `selection` to the `star-id` attribute of the `event.target` respectively. \nFinally, pass the appropriate values to each `` component (`starId` and `marked`).\n\n",
"codeBlocks": [
- "```jsx\nconst StarRating = (function() {\n function Star({ marked, starId }) {\n return (\n \n {marked ? '\\u2605' : '\\u2606'}\n \n );\n }\n\n return class StarRating extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n rating: typeof props.rating == 'number' ? props.rating : 0,\n selection: 0\n };\n this.hoverOver = this.hoverOver.bind(this);\n this.hoverOut = this.hoverOver.bind(this, null);\n this.handleClick = this.handleClick.bind(this);\n }\n hoverOver(event) {\n let val = 0;\n if (event && event.target && event.target.getAttribute('star-id'))\n val = event.target.getAttribute('star-id');\n this.setState(state => ({ selection: val }));\n }\n handleClick(event) {\n const val = event.target.getAttribute('star-id') || this.state.rating;\n this.setState(state => ({ rating: val }));\n }\n render() {\n return (\n \n {Array.from({ length: 5 }, (v, i) => (\n = i+1\n : this.state.rating >= i+1\n }\n />\n ))}\n
\n );\n }\n };\n})();\n```",
+ "```jsx\nfunction Star({ marked, starId }) {\n return (\n \n {marked ? \"\\u2605\" : \"\\u2606\"}\n \n );\n}\n\nfunction StarRating(props) {\n const [rating, setRating] = React.useState(\n typeof props.rating == \"number\" ? props.rating : 0\n );\n const [selection, setSelection] = React.useState(0);\n const hoverOver = event => {\n let val = 0;\n if (event && event.target && event.target.getAttribute(\"star-id\"))\n val = event.target.getAttribute(\"star-id\");\n setSelection(val);\n };\n return (\n ` to wrap the `` components, which are created using `Array.prototype.map` on an array of 5 elements, created using `Array.from`, and handle the `onMouseLeave` event to set `state.selection` to `0`, the `onClick` event to set
-the `state.rating` and the `onMouseOver` event to set `state.selection` to the `star-id` attribute of the `event.target` respectively.
+Define a component, called `Star` that will render each individual star with the appropriate appearance, based on the parent component's state.
+In the `StarRating` component, use the `React.setState()` hook to define the `rating` and `selection` state variables with the initial values of `props.rating` (or `0` if invalid or not supplied) and `0`.
+Create a method, `hoverOver`, that updates `selected` and `rating` according to the provided `event`.
+Create a `
` to wrap the `` components, which are created using `Array.prototype.map` on an array of 5 elements, created using `Array.from`, and handle the `onMouseLeave` event to set `selection` to `0`, the `onClick` event to set the `rating` and the `onMouseOver` event to set `selection` to the `star-id` attribute of the `event.target` respectively.
Finally, pass the appropriate values to each `` component (`starId` and `marked`).
```jsx
-const StarRating = (function() {
- function Star({ marked, starId }) {
- return (
-
- {marked ? '\u2605' : '\u2606'}
-
- );
- }
+function Star({ marked, starId }) {
+ return (
+
+ {marked ? "\u2605" : "\u2606"}
+
+ );
+}
- return class StarRating extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- rating: typeof props.rating == 'number' ? props.rating : 0,
- selection: 0
- };
- this.hoverOver = this.hoverOver.bind(this);
- this.hoverOut = this.hoverOver.bind(this, null);
- this.handleClick = this.handleClick.bind(this);
- }
- hoverOver(event) {
- let val = 0;
- if (event && event.target && event.target.getAttribute('star-id'))
- val = event.target.getAttribute('star-id');
- this.setState(state => ({ selection: val }));
- }
- handleClick(event) {
- const val = event.target.getAttribute('star-id') || this.state.rating;
- this.setState(state => ({ rating: val }));
- }
- render() {
- return (
-
- {Array.from({ length: 5 }, (v, i) => (
- = i+1
- : this.state.rating >= i+1
- }
- />
- ))}
-
- );
- }
+function StarRating(props) {
+ const [rating, setRating] = React.useState(
+ typeof props.rating == "number" ? props.rating : 0
+ );
+ const [selection, setSelection] = React.useState(0);
+ const hoverOver = event => {
+ let val = 0;
+ if (event && event.target && event.target.getAttribute("star-id"))
+ val = event.target.getAttribute("star-id");
+ setSelection(val);
};
-})();
+ return (
+ hoverOver(null)}
+ onClick={() =>
+ setRating(event.target.getAttribute("star-id") || this.state.rating)
+ }
+ onMouseOver={hoverOver}
+ >
+ {Array.from({ length: 5 }, (v, i) => (
+ = i + 1 : rating >= i + 1}
+ />
+ ))}
+
+ );
+}
```
```jsx
diff --git a/snippets/ModalDialog.md b/snippets_archive/ModalDialog.md
similarity index 100%
rename from snippets/ModalDialog.md
rename to snippets_archive/ModalDialog.md