Simple React Component
src/App.js
import React from "react";
const App = () => {
const [tags, setTags] = React.useState([]);
console.log(tags);
let tagInput
const removeTag = (i) => {
const newTags = [...tags];
newTags.splice(i, 1);
// Call the defined function setTags which will replace tags with the new value.
setTags(newTags);
};
const inputKeyDown = (e) => {
const val = e.target.value;
if (e.key === "Enter" && val) {
if (tags.find((tag) => tag.toLowerCase() === val.toLowerCase())) {
return;
}
setTags([...tags, val]);
tagInput.value = null;
} else if (e.key === "Backspace" && !val) {
removeTag(tags.length - 1);
}
};
return (
<div className="input-tag">
<ul className="input-tag__tags">
{tags.map((tag, i) => (
<li key={tag}>
{tag}
<button
type="button"
onClick={() => {
removeTag(i);
}}
>
delete
</button>
</li>
))}
<li className="input-tag__tags__input">
<input
type="text"
onKeyDown={inputKeyDown}
ref={(c) => {
tagInput = c;
}}
/>
</li>
</ul>
</div>
);
};
export default App;
*src/index.js
import React from "react";
import ReactDOM from "react-dom";
import App from './App'
ReactDOM.render(
<div>
<App />
</div>,
document.getElementById('root')
);
src/index.css
* {
font-family: sans-serif;
font-size: 17px;
}
body {
background: #f2f2f2;
padding: 20px;
}
.input-tag {
background: white;
border: 1px solid #d6d6d6;
border-radius: 2px;
display: flex;
flex-wrap: wrap;
padding: 5px 5px 0;
}
.input-tag input {
border: none;
width: 100%;
}
.input-tag__tags {
display: inline-flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
width: 100%;
}
.input-tag__tags li {
align-items: center;
background: #85A3BF;
border-radius: 2px;
color: white;
display: flex;
font-weight: 300;
list-style: none;
margin-bottom: 5px;
margin-right: 5px;
padding: 5px 10px;
}
.input-tag__tags li button {
align-items: center;
appearance: none;
background: #333333;
border: none;
border-radius: 50%;
color: white;
cursor: pointer;
display: inline-flex;
font-size: 12px;
height: 15px;
justify-content: center;
line-height: 0;
margin-left: 8px;
padding: 0;
transform: rotate(45deg);
width: 15px;
}
.input-tag__tags li.input-tag__tags__input {
background: none;
flex-grow: 1;
padding: 0;
}
Top comments (1)
vi markdown syntax valo kore follow koren .three back tics diye pashe language a nam lekhben.
dev-to-uploads.s3.amazonaws.com/up...