0

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.
Suryansh Bhatnagar
  • 1

1 Answers1

0

It would probably increase your chances of getting a answer by providing the component where you use TagsInput, since the implementation of props.selectedTags(), props.setFieldValue() is missing.

Xershy
  • 177
  • 11
  • As a new user, you do not have the ability to comment on posts. So, refrain from using answers as a means to request clarifications of a question as this is not very informative for users looking for solutions to similar questions. Instead please look into questions that you will be able to answer directly and level up to get access to commenting. Cheers. – Rohan Asokan Feb 15 '22 at 15:26