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

Fixed issues acc. to guidelines

Browse Source
This commit is contained in:
Praveen Bisht
2019-10-02 12:46:15 +05:30
committed by GitHub
parent 58d67c16c6
commit 1970fc3448
1 changed files with 8 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
snippets/TagInput.md
View File

@ -72,7 +72,7 @@ Renders an input field to add tags.
``` ```
```jsx ```jsx
function TagInput(props) { function TagInput() {
const [tags, setTags] = React.useState(['NodeJs', 'MongoDB']) const [tags, setTags] = React.useState(['NodeJs', 'MongoDB'])
const removeTags = indexToRemove => { const removeTags = indexToRemove => {
setTags([...tags.filter((_, index) => index !== indexToRemove)]) setTags([...tags.filter((_, index) => index !== indexToRemove)])
@ -84,26 +84,25 @@ function TagInput(props) {
} }
} }
return ( return (
<div className="tags-input"> <div className='tags-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>{tag}</span>
<i <i
className="material-icons"
onClick={() => removeTags(index)} onClick={() => removeTags(index)}
> >
close x
</i> </i>
</li> </li>
))} ))}
</ul> </ul>
<input <input
type="text" type='text'
onKeyUp={event => onKeyUp={event =>
event.key === 'Enter' ? addTags(event) : null event.key === 'Enter' ? addTags(event) : null
} }
placeholder="Press enter to add tags" placeholder='Press enter to add tags'
/> />
</div> </div>
) )
@ -111,5 +110,5 @@ function TagInput(props) {
``` ```
```jsx ```jsx
ReactDOM.render(<TagInput />, document.getElementById("root")); ReactDOM.render(<TagInput />, document.getElementById('root');
``` ```