andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed: Formatting Issues & Syntax Errors

Browse Source
This commit is contained in:
Praveen Bisht
2019-10-02 15:40:37 +05:30
committed by GitHub
parent b5b0993e88
commit 34a0ac1824
1 changed files with 21 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
snippets/TagInput.md
View File

@ -5,12 +5,12 @@ tags: visual,input,intermediate
Renders an input field to add tags. Renders an input field to add tags.
- Define a `TagInput` component and use `React.useState()` hook to initialize an empty array of tags. - Define a `TagInput` component and use `React.useState()` hook to initialize an array with tags passed as `props`.
- Use `Array.prototype.map` on collected nodes to render the list of tags. - Use `Array.prototype.map()` on collected nodes to render the list of tags.
- Define `addTab`, which will be executed on pressing `Enter` key. - Define the `addTab` method, which will be executed on pressing the `Enter` key.
- `addTab` uses the `setTabs` to add the new tag using the `spread` operator to prepend the existing tags and adds the new tag at the end of the tags array. - `addTab` method uses the `setTabs` method to add the new tag using the spread (`...`) operator to prepend the existing tags and adds the new tag at the end of the tags array.
- Define `removeTab`, which will executed on clicking the delete icon in the tag. - Define the `removeTab` method, which will be executed on clicking the delete icon in the tag.
- Use the `Array.prototyp.filter` in `removeTab` to remove the tag using the `index` of the tag to filter it out from tags array. - Use `Array.prototype.filter()` in `removeTab` method to remove the tag using the `index` of the tag to filter it out from tags array.
```css ```css
.tag-input { .tag-input {
@ -57,11 +57,12 @@ Renders an input field to add tags.
background: #0052cc; background: #0052cc;
} }
.tag span { .tag-title {
margin-top: 3px; margin-top: 3px;
} }
.tag i { .tag-close-icon {
display: block;
width: 16px; width: 16px;
height: 16px; height: 16px;
line-height: 16px; line-height: 16px;
@ -73,32 +74,31 @@ Renders an input field to add tags.
background: #fff; background: #fff;
cursor: pointer; cursor: pointer;
} }
``` ```
```jsx ```jsx
function TagInput() { function TagInput(props) {
const [tags, setTags] = React.useState(['NodeJs', 'MongoDB']) const [tags, setTags] = React.useState(props.tags);
const removeTags = indexToRemove => { const removeTags = indexToRemove => {
setTags([...tags.filter((_, index) => index !== indexToRemove)]) setTags([...tags.filter((_, index) => index !== indexToRemove)]);
} }
const addTags = event => { const addTags = event => {
if (event.target.value !== '') { if (event.target.value !== '') {
setTags([...tags, event.target.value]) setTags([...tags, event.target.value]);
event.target.value = '' event.target.value = '';
} }
} }
return ( return (
<div className='tags-input'> <div className='tag-input'>
<ul id='tags' <ul id='tags'>
{tags.map((tag, index) => ( {tags.map((tag, index) => (
<li key={index} className='tag' <li key={index} className='tag'>
<span>{tag}</span> <span className='tag-title'>{tag}</span>
<i <span className='tag-close-icon'
onClick={() => removeTags(index)} onClick={() => removeTags(index)}
> >
x x
</i> </span>
</li> </li>
))} ))}
</ul> </ul>
@ -115,5 +115,5 @@ function TagInput() {
``` ```
```jsx ```jsx
ReactDOM.render(<TagInput />, document.getElementById('root'); ReactDOM.render(<TagInput tags={['Nodejs', 'MongoDB']}/>, document.getElementById('root'));
``` ```