i am trying to create a job posting form using react , mui , formik and yup in which
i am creating a tag input field same as stackoverflow have but when i am setting the value of tag after adding new tag using setTags then it is adding the second last tag not the last.
import { TextField } from '@material-ui/core';
import "../../App.css";
const TagsInput = props => {
const [tags, setTags] = React.useState(props.tags);
const removeTags = indexToRemove => {
setTags([...tags.filter((_, index) => index !== indexToRemove)]);
};
const addTags = (event,tags) => {
if (event.target.value !== "") {
setTags([...tags, event.target.value]);
props.selectedTags([...tags, event.target.value]);
props.setFieldValue('tag',tags)
event.target.value = "";
}
};
return (
<div className="tags-input">
<ul id="tags">
{tags.map((tag, index) => (
<li key={index} className="tag">
<span className='tag-title'>{tag}</span>
<span className='tag-close-icon'
onClick={() => removeTags(index)}
>
x
</span>
</li>
))}
</ul>
<TextField
type="text"
onKeyUp={event => event.key === "Enter" ? addTags(event,tags) : null}
placeholder="Add tags"
/>
</div>
);
};
export default TagsInput```
Props which i have passed
props = <selectedTags={selectedTags} setFieldValue={setFieldValue} tags={[]}>
Example:
like if i enter *html* as first tag then it sets *[]* as value of tag
if i enter *css* as sencond tag then it sets *['html']* as value of tag
if i enter *js* as third tag then it sets *['html','css']* as value of tag
Plese help me out how can i fix this bug.